/* =========================================================
   SUPER OGLASI V4 — HOME / OGLASI / DETALJNI OGLAS
   Centralni CSS stranice index.php
   ========================================================= */

:root{
  --red:#ed1c24;
  --text:#18304a;
  --muted:#66788a;
  --line:#dfe6ee;
  --bg:#f7f9fb;
  --white:#fff;
  --green:#41b96b;
  --blue:#2788e8;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}

.hero{display:grid;grid-template-columns:290px repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.categories{grid-column:1;background:#fff;border:1px solid var(--line);border-radius:7px;padding:12px 13px}
.categories h3{margin:0 0 10px;font-size:14px}
.cat{height:25px;border-bottom:1px solid #edf1f5;display:flex;align-items:center;justify-content:space-between;font-size:11px}
.cat:last-child{border-bottom:0}
.cat .n{background:#eef3f7;border-radius:12px;padding:2px 8px;color:#708297;font-size:10px}
.more{margin-top:8px;font-size:10px;font-weight:700}
.toolbar{margin-left:304px;margin-top:12px;position:relative;z-index:2;width:calc(100% - 304px);background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px;display:flex;align-items:center;justify-content:space-between}
.tabs{display:flex;gap:8px}
.tab{height:36px;padding:0 18px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:11px;font-weight:600;color:#44566a}
.tab.active{background:var(--red);border-color:var(--red);color:#fff}
.sort{display:flex;align-items:center;gap:8px;color:#74859a;font-size:11px;font-weight:600}
.sort select{height:32px;border:1px solid var(--line);border-radius:5px;background:#fff;color:#5d6f82;font-size:11px;font-weight:600;padding:0 28px 0 10px}
.viewbtn{width:34px;height:32px;border-radius:5px;border:1px solid var(--line);background:#fff;color:#64758a;font-size:11px;font-weight:600}
.viewbtn.active{background:var(--red);color:#fff;border-color:var(--red)}
.content{display:grid;grid-template-columns:290px minmax(0,1fr);gap:14px;margin-top:12px}
/* ========================================================
   DETALJNI OGLAS - VIZUELNI RASPORED
   ======================================================== */

.detail-page{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:16px;
    align-items:start;
}

.detail-main-column{
    min-width:0;
}

.detail-right-column{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.detail-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
}

.detail-ad{
    padding:14px;
}

.detail-heading-main{
    flex:1;
    min-width:0;
}

.detail-heading-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:10px;
}

.detail-heading-row h1{
    margin:0;
    font-size:23px;
    line-height:1.25;
    color:#18304a;
}

.detail-top-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
    color:#7b8998;
    font-size:10px;
}

.detail-tags{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:8px 0 12px;
}

/* Oznaka STILA na velikom prikazu — boji se samo oznaka */
.detail-style-badge.style-super{
    background:#f58220 !important;
    color:#fff !important;
    border:1px solid #e57212 !important;
}

.detail-style-badge.style-shop{
    background:#f6b45b !important;
    color:#27384a !important;
    border:1px solid #e6a044 !important;
}

.detail-style-badge.style-sms{
    background:#f2c500 !important;
    color:#27384a !important;
    border:1px solid #d7ad00 !important;
}

.detail-style-badge.style-free{
    background:#fff !important;
    color:#40566d !important;
    border:1px solid #cfd7df !important;
    box-shadow:0 1px 2px rgba(0,0,0,.08) !important;
}

.detail-gallery-main{
    aspect-ratio:4 / 3;
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:#edf1f5;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.detail-gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.detail-gallery-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #d9e0e8;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:#40566d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    cursor:pointer;
    z-index:2;
}

.detail-gallery-arrow.left{left:10px}
.detail-gallery-arrow.right{right:10px}

.detail-gallery-arrow[hidden]{
    display:none !important;
}

.detail-photo-counter{
    position:absolute;
    left:10px;
    bottom:10px;
    padding:5px 9px;
    border-radius:5px;
    background:rgba(20,35,50,.75);
    color:#fff;
    font-size:10px;
    z-index:2;
}

.detail-thumbnails{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:92px;
    gap:6px;
    margin-top:7px;
    overflow-x:auto;
    padding-bottom:3px;
}

.detail-thumb{
    width:92px;
    height:68px;
    padding:0;
    border:1px solid var(--line);
    border-radius:6px;
    background:#e8edf2;
    overflow:hidden;
    cursor:pointer;
}

.detail-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.detail-thumb.active{
    border:2px solid var(--red);
}

.detail-price-actions{
    display:grid;
    grid-template-columns:minmax(180px,1fr) auto;
    align-items:center;
    gap:12px;
    margin-top:12px;
}

.detail-price-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.detail-price-big{
    color:var(--red);
    font-size:23px;
    font-weight:700;
    white-space:nowrap;
}

.detail-price-old{
    color:#7e8c9b;
    font-size:12px;
    text-decoration:line-through;
}

.detail-discount{
    background:var(--red);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:5px 7px;
    border-radius:5px;
}

.detail-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.detail-favorite-form{
    margin:0;
}

.detail-action-btn{
    height:36px;
    padding:0 14px;
    border:1px solid #cfd9e5;
    border-radius:6px;
    background:#fff;
    color:#29445f;
    font-size:10px;
    font-weight:700;
}

.detail-action-btn.primary{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
    min-width:145px;
}

.detail-section{
    margin-top:14px;
}

.detail-section h2{
    margin:0 0 8px;
    font-size:15px;
    color:#18304a;
}

.detail-section-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:7px;
    padding:13px;
}

.detail-basic-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 18px;
}

.detail-basic-item{
    display:grid;
    grid-template-columns:27px 1fr;
    gap:7px;
    align-items:start;
    font-size:10px;
}

.detail-basic-icon{
    font-size:18px;
    color:#526b84;
    text-align:center;
    line-height:1;
    transform:translateY(-2px);
}

.detail-basic-label{
    color:#8190a0;
    margin-bottom:2px;
}

.detail-basic-value{
    color:#203b57;
    font-weight:700;
    font-size:11px;
}


/* V4 — DETALJ OGLASA — SPECIFIKACIJE */
.detail-spec-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px 18px;
}

.detail-spec-item{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:8px;
    align-items:start;
    min-width:0;
}

.detail-spec-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    min-width:28px;
    font-size:18px;
    line-height:1;
    color:#526b84;
}

.detail-spec-label{
    margin:0 0 2px;
    color:#8190a0;
    font-size:10px;
    line-height:1.2;
}

.detail-spec-value{
    color:#203b57;
    font-size:11px;
    line-height:1.25;
    font-weight:700;
    overflow-wrap:anywhere;
}

@media(max-width:640px){
    .detail-spec-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px 12px;
    }

    .detail-spec-item{
        grid-template-columns:24px minmax(0,1fr);
        gap:6px;
    }

    .detail-spec-icon{
        width:24px;
        min-width:24px;
        font-size:16px;
    }
}

.detail-description{
    font-size:12px;
    line-height:1.6;
    color:#40566d;
    white-space:pre-wrap;
}

.detail-similar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}

.detail-similar-head h2{
    margin:0;
}

.detail-similar-more{
    margin-top:0;
    font-size:10px;
    font-weight:700;
    text-decoration:none;
    color:inherit;
}

.detail-similar-more:hover{
    text-decoration:none;
}





.detail-seller{
    padding:14px;
}

.detail-seller h2{
    margin:0 0 14px;
    font-size:15px;
}

.detail-seller-head{
    margin-bottom:13px;
}

.detail-seller-logo{
    width:100%;
    margin:0 0 14px;
    padding:10px;
    box-sizing:border-box;
    border:1px solid #edf1f5;
    border-radius:7px;
    background:#fff;
    text-align:center;
}

.detail-seller-logo img{
    display:block;
    width:100%;
    height:auto;
    max-height:180px;
    object-fit:contain;
}

.detail-seller-name{
    margin-bottom:5px;
    font-size:14px;
    font-weight:700;
    color:#18304a;
}

.detail-seller-address{
    font-size:10px;
    line-height:1.55;
    color:#53687c;
}

.detail-seller-line{
    padding:8px 0;
    margin:0;
    border-top:1px solid #edf1f5;
    font-size:13px;
    line-height:1.45;
    color:#53687c;
}

.detail-seller-contact-row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:12px;
}

.detail-contact-icon{
    display:block;
    width:14px;
    height:14px;
}

.detail-contact-icon-offset{
    margin-left:2px;
}

.detail-contact-link{
    display:inline;
    padding:0;
    border:0;
    color:inherit;
    font-size:inherit;
    text-decoration:none;
    cursor:pointer;
}

.detail-seller-more{
    width:100%;
    margin-top:12px;
    height:34px;
    border:1px solid #b9d3f0;
    border-radius:6px;
    background:#fff;
    color:#2676c5;
    font-size:10px;
    font-weight:700;
}

@media(max-width:1150px){
    .detail-page{
        grid-template-columns:1fr;
    }

    .detail-right-column{
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }
}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}

.categories .cat {
    text-decoration: none;
    color: inherit;
}

.categories .cat:hover {
    text-decoration: none;
}

.categories .more {
    text-decoration: none;
    color: inherit;
}

.categories .more:hover {
    text-decoration: none;
}

.price-inputs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:2px;
}
.price-inputs input{
    width:100%;
    height:25px;
    border:1px solid var(--line);
    border-radius:4px;
    padding:3px 7px;
    color:#7d8c9c;
    font-size:10px;
}
.dynamic-filter-level{
    margin-top:4px;
}
.dynamic-filter-level select{
    width:100%;
    height:25px;
    border:1px solid var(--line);
    border-radius:4px;
    background:#fff;
    color:#7d8c9c;
    font-size:10px;
    padding:2px 7px;
}




.filter .filter-model{
    margin-top:8px;
}


/* Informacija o rezultatu i dodatne opcije filtera */
.oglasi-rezultat-info{
    max-width:1400px;
    margin:8px auto 10px;
    padding:0 10px;
    font-size:14px;
    color:#40566d;
}

.filter-checkbox-options{
    margin-top:10px;
    display:grid;
    gap:7px;
    font-size:12px;
    color:#40566d;
}

/* =========================================================
   PRODAVNICE — javni direktorij
   ========================================================= */

.prodavnice-page {
    width: 100%;
    padding: var(--v4-main-gap) 0 40px;
}

.prodavnice-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--v4-main-gap);
}

.prodavnice-heading h1 {
    margin:0;
}

.prodavnice-heading p {
    margin: 0;
    font-size: 13px;
    color: #667085;
}

.prodavnice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.prodavnica-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.prodavnica-card:hover {
    border-color: #ed1c24;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.prodavnica-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 125px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    padding: 12px;
    box-sizing: border-box;
}

.prodavnica-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.prodavnica-logo span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ed1c24;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
}

.prodavnica-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px;
}

.prodavnica-card-body h2 {
    margin: 0 0 8px;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.prodavnica-card-body p {
    display: -webkit-box;
    min-height: 38px;
    margin: 0 0 12px;
    overflow: hidden;
    color: #667085;
    font-size: 13px;
    line-height: 19px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.prodavnica-broj-oglasa {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #edf0f4;
    color: #ed1c24;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1050px) {
    .prodavnice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .prodavnice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .prodavnice-grid {
        grid-template-columns: 1fr;
    }
}

/* PRODAVNICE — raspored identičan OGLASIMA:
   290px filter lijevo + 4 kartice desno */
.prodavnice-page {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    width: 100%;
    padding: var(--v4-main-gap) 0 40px;
}

.prodavnice-heading {
    grid-column: 1 / -1;
}

.prodavnice-filter {
    grid-column: 1;
    min-width: 0;
}

.prodavnice-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    min-width: 0;
}


@media (max-width: 1050px) {
    .prodavnice-page {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .prodavnice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .prodavnice-page {
        display: block;
    }

    .prodavnice-filter {
        margin-bottom: var(--v4-main-gap);
    }

    .prodavnice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .prodavnice-grid {
        grid-template-columns: 1fr;
    }
}

/* PROFIL PRODAVNICE — iznad njenih oglasa */
.prodavnica-profil {
    display: flex;
    align-items: stretch;
    gap: 18px;
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.prodavnica-profil-logo {
    display: flex;
    flex: 0 0 140px;
    width: 140px;
    height: 100px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

.prodavnica-profil-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.prodavnica-profil-logo span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ed1c24;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

.prodavnica-profil-tekst {
    flex: 1;
    min-width: 0;
}

.prodavnica-profil-tekst h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
}

.prodavnica-profil-tekst p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 600px) {
    .prodavnica-profil {
        flex-direction: column;
    }

    .prodavnica-profil-logo {
        flex-basis: auto;
        width: 100%;
        height: 100px;
    }
}

/* PRODAVNICA — broj oglasa lijevo, SORT i prikaz desno u istom redu */
.prodavnica-rezultat-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.prodavnica-rezultat-info .sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 760px) {
    .prodavnica-rezultat-info {
        flex-wrap: wrap;
    }
}

/* HOME — toolbar poravnat sa lijevom ivicom FILTERA kao na OGLASI */
body:not(.oglasi-mode) .toolbar {
    margin-left: 0;
    width: 100%;
}


/* PRODAVNICA — Broj oglasa: jednak razmak iznad i ispod */
.prodavnica-rezultat-info {
    margin: 12px 0 !important;
    padding: 0 10px !important;
}


/* DETALJNI OGLAS — bedževi kao unificirana dugmad iznad slike */
.detail-top-meta .detail-tags-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-top-meta .detail-tags-buttons .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   DETALJNI OGLAS — KONTAKT PODACI OGLASA
   usklađeno sa PODACI O KORISNIKU
   ========================================================= */

.detail-contact {
    padding: 14px;
}

.detail-contact h2 {
    margin: 0 0 14px;
    font-size: 15px;
}

/* Svi kontakt redovi iste veličine kao podaci korisnika */
.detail-contact .detail-seller-line {
    padding: 8px 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #53687c;
}

/* Telefon + Viber + WhatsApp ostaju uredno u jednom redu */
.detail-contact .detail-seller-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

/* Komunikacijske ikone malo veće i čitljivije */
.detail-contact .detail-contact-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

/* Bez nepotrebnog dodatnog uvlačenja Vibera */
.detail-contact .detail-contact-icon-offset {
    margin-left: 2px;
}

/* E-mail i web identični fontu ostalih kontakt podataka */
.detail-contact .detail-contact-link {
    display: inline;
    padding: 0;
    border: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
}


.detail-similar-central{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.detail-similar-central > .so-kvadrat-render{
    display:flex;
    min-width:0;
    height:100%;
}

.detail-similar-central > .so-kvadrat-render > .so-kvadrat{
    width:100%;
}


/* Slični oglasi — neutralan link, samo pokazivač ruke */
.detail-similar-head .more,
.detail-similar-head .more:visited,
.detail-similar-head .more:hover,
.detail-similar-head .more:focus,
.detail-similar-head .more:active{
    color:inherit !important;
    text-decoration:none !important;
}

.detail-similar-head .more{
    cursor:pointer;
}

/* =========================================================
   V4 — HOME / OGLASI — RESPONSIVE OSNOVNI RASPORED
   ========================================================= */

@media (max-width:1050px){

    .hero{
        grid-template-columns:240px repeat(3,minmax(0,1fr));
    }

    .ad.big{
        grid-column:2 / -1;
    }

    .ad.small{
        display:none;
    }

    .content{
        grid-template-columns:240px minmax(0,1fr);
    }

    body.oglasi-mode .toolbar{
        margin-left:254px;
        width:calc(100% - 254px);
    }

    .grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:760px){

    .hero{
        display:block;
    }

    .hero .categories{
        margin-bottom:var(--v4-main-gap);
    }

    .ad.big{
        width:100%;
        height:90px;
        min-height:90px;
    }

    .content{
        display:block;
    }

    body.oglasi-mode .toolbar,
    body:not(.oglasi-mode) .toolbar{
        margin-left:0;
        width:100%;
    }

    .toolbar{
        flex-wrap:wrap;
        gap:8px;
    }

    .tabs{
        max-width:100%;
        overflow-x:auto;
    }

    .sort{
        flex-wrap:wrap;
        margin-left:auto;
    }

    .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:480px){

    .grid{
        grid-template-columns:1fr;
    }

    .toolbar{
        padding:7px;
    }

    .tab{
        padding:0 12px;
        white-space:nowrap;
    }

    .sort{
        width:100%;
        margin-left:0;
    }

    .sort select{
        flex:1;
        min-width:0;
    }
}


/* =========================================================
   V4 — MOBILE KOMPAKTNI TOOLBAR OGLASA
   ========================================================= */
@media (max-width:640px){

    .toolbar{
        padding:5px;
        gap:5px;
    }

    .tabs{
        width:100%;
        gap:4px;
        overflow:visible;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .tab{
        width:100%;
        height:30px;
        padding:0 4px;
        font-size:9px;
        border-radius:5px;
        white-space:nowrap;
    }

    .sort{
        width:100%;
        gap:5px;
        flex-wrap:nowrap;
        font-size:9px;
    }

    .sort select{
        height:30px;
        padding:0 22px 0 7px;
        font-size:9px;
    }

    .viewbtn{
        flex:0 0 30px;
        width:30px;
        height:30px;
        font-size:10px;
    }
}

/* V4 — MOBILNI SKLOPIVI FILTERI */
.mobile-filter-toggle{
    display:none;
}

@media (max-width:760px){
    .mobile-filter-toggle{
        width:100%;
        height:30px;
        margin:0 0 6px;
        padding:0 10px;
        border:1px solid #cfd8e3;
        border-radius:5px;
        background:#fff;
        color:#263a50;
        display:flex;
        align-items:center;
        justify-content:space-between;
        font-size:10px;
        font-weight:700;
        cursor:pointer;
    }

    .mobile-filter-arrow{
        font-size:9px;
    }

    .content > aside > .filters{
        display:none;
    }

    .content > aside > .filters.mobile-filter-open{
        display:block;
    }
}

/* V4 — DETALJ OGLASA — kompaktan mobilni raspored */
@media(max-width:640px){

    .detail-page{
        gap:6px;
        margin-left:4px;
        margin-right:4px;
    }

    .detail-ad{
        padding:6px;
        border-radius:5px;
    }

    .detail-top-meta{
        display:block;
        margin-bottom:6px;
    }

    .detail-top-meta .detail-tags-buttons{
        margin:0 0 5px;
        gap:4px;
    }

    .detail-top-meta .detail-tags-buttons .badge{
        min-height:28px;
        padding:0 8px;
    }

    .detail-top-meta > div:last-child{
        display:block;
        margin:0 0 6px;
        line-height:18px;
    }

    .detail-heading-row{
        gap:6px;
        margin-bottom:6px;
    }

    .detail-heading-row h1{
        font-size:18px;
        line-height:1.2;
    }
}

/* V4 — MOBILNO — jedinstveni bočni rub kao header */
@media(max-width:640px){

    .toolbar,
    .content{
        width:calc(100% - 20px);
        margin-left:10px;
        margin-right:10px;
    }

    .detail-page{
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    .detail-ad{
        padding:6px;
    }
}

/* V4 — MOBILNO — .page centralno određuje bočni rub */
@media(max-width:640px){
    .toolbar,
    .content{
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    .detail-page{
        width:100%;
        margin-left:0;
        margin-right:0;
    }
}

/* V4 — DETALJ OGLASA — HITNO i AKCIJA kao oznake/dugmad */
.detail-top-meta .detail-tags-buttons .badge.urgent{
    background:#e30613;
    color:#fff;
    border:1px solid #c9000b;
}

.detail-top-meta .detail-tags-buttons .badge.sale-badge{
    background:#198754;
    color:#fff;
    border:1px solid #157347;
}

/* V4 — DETALJ OGLASA — manji razmak ispod headera na mobilnom */
@media(max-width:640px){
    body:has(.detail-page) .page{
        padding-top:4px;
    }

    body:has(.detail-page) .toolbar{
        margin-top:0;
    }
}

/* =========================================================
   V4 — JAVNI SADRŽAJ — CENTRALNI RAZMAK GLAVNIH BLOKOVA
   ========================================================= */

:root{
    --v4-main-gap:6px;
}

/* OGLASI */
.toolbar{
    margin-top:var(--v4-main-gap);
}

.content{
    margin-top:var(--v4-main-gap);
}

/* PRODAVNICE */
.prodavnice-page{
    padding-top:var(--v4-main-gap);
}

.prodavnice-heading{
    margin-bottom:var(--v4-main-gap);
}

/* Mobilno koristi isti standard */
@media(max-width:640px){
    .toolbar,
    .content{
        margin-top:var(--v4-main-gap);
    }

    .prodavnice-page{
        padding-top:var(--v4-main-gap);
    }

    .prodavnice-heading{
        margin-bottom:var(--v4-main-gap);
    }
}

/* =========================================================
   V4 — DETALJ OGLASA — MOBILNA GALERIJA
   ========================================================= */
@media(max-width:640px){

    .detail-page,
    .detail-main-column,
    .detail-ad,
    .detail-gallery-main,
    .detail-thumbnails{
        min-width:0;
        max-width:100%;
    }

    .detail-gallery-main{
        width:100%;
        aspect-ratio:4 / 3;
        overflow:hidden;
    }

    .detail-gallery-main img{
        display:block;
        width:100%;
        max-width:100%;
        height:100%;
        object-fit:contain;
    }

    .detail-thumbnails{
        width:100%;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        grid-auto-flow:row;
        grid-auto-columns:auto;
        gap:5px;
        overflow:visible;
        padding-bottom:0;
    }

    .detail-thumb{
        width:100%;
        min-width:0;
        height:auto;
        aspect-ratio:4 / 3;
    }

    .detail-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
}


/* V4 — DETALJ OGLASA — mobilna širina naslova i galerije */
@media(max-width:640px){

    .detail-main-column,
    .detail-box,
    .detail-ad,
    .detail-heading-row,
    .detail-heading-main{
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .detail-heading-row{
        display:block;
    }

    .detail-heading-row h1{
        width:100%;
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .detail-gallery-main{
        width:100%;
        min-width:0;
        max-width:100%;
        box-sizing:border-box;
    }

    .detail-thumbnails{
        width:100%;
        min-width:0;
        max-width:100%;
        box-sizing:border-box;
    }
}


/* V4 — DETALJ OGLASA — mobilne osnovne informacije */
@media(max-width:640px){

    .detail-section-card{
        padding:6px;
    }

    .detail-basic-grid{
        grid-template-columns:1fr;
        gap:6px;
    }

    .detail-basic-item{
        grid-template-columns:22px minmax(0,1fr);
        gap:5px;
        min-width:0;
    }

    .detail-basic-item > div:last-child{
        min-width:0;
    }

    .detail-basic-value{
        overflow-wrap:anywhere;
        word-break:normal;
    }
}


/* V4 — DETALJ OGLASA — osnovne informacije: 2 puna + 2x2 */
@media(max-width:640px){

    .detail-basic-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px 8px;
    }

    .detail-basic-item:nth-child(1),
    .detail-basic-item:nth-child(2){
        grid-column:1 / -1;
    }

    .detail-basic-item{
        min-width:0;
    }
}


/* V4 — DETALJ OGLASA — mobilna desna kolona */
@media(max-width:640px){

    .detail-right-column{
        display:grid;
        grid-template-columns:1fr;
        gap:6px;
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .detail-right-column > *{
        min-width:0;
        max-width:100%;
    }
}


/* V4 — DETALJ OGLASA — slični oglasi mobilno */
@media(max-width:640px){

    .detail-similar-central{
        grid-template-columns:1fr;
        gap:6px;
        width:100%;
        min-width:0;
    }

    .detail-similar-central > .so-kvadrat-render{
        width:100%;
        min-width:0;
    }

    .detail-similar-central > .so-kvadrat-render > .so-kvadrat{
        width:100%;
        max-width:100%;
    }
}


/* V4 — DETALJ OGLASA — kompaktan korisnik na mobilnom */
@media(max-width:640px){

    .detail-seller{
        padding:6px;
    }

    .detail-seller h2{
        margin-bottom:6px;
    }

    .detail-seller-head{
        margin-bottom:6px;
    }

    .detail-seller-logo{
        margin-bottom:6px;
        padding:6px;
    }

    .detail-seller-line{
        padding:4px 0;
        line-height:1.35;
    }

    .detail-seller-more{
        margin-top:6px;
        height:30px;
    }
}


/* V4 — DETALJ OGLASA — kompaktni donji blokovi na mobilnom */
@media(max-width:640px){

    /* KONTAKT PODACI OGLASA */
    .detail-contact{
        padding:6px;
    }

    .detail-contact h2{
        margin:0 0 6px;
    }

    .detail-contact .detail-seller-line{
        padding:4px 0;
        line-height:1.35;
    }

    .detail-contact .detail-seller-contact-row{
        gap:5px;
    }

    /* WEBSMS OBJAŠNJENJE / SLIDER */
    .detail-websms-slider-box{
        padding:6px;
    }

    /* PODIJELITE OVAJ OGLAS */
    .detail-share-box{
        padding:6px !important;
    }

    .detail-share-title{
        margin-bottom:6px !important;
    }

    .detail-share-icons{
        gap:6px !important;
    }
}


/* V4 — POČETNA — bez viška prostora iznad Kategorija na mobilnom */
@media(max-width:640px){
    .page:has(> .hero){
        padding-top:0;
    }
}


/* V4 — PRODAVNICE — mobilno: isti gornji razmak kao ostale javne stranice */
@media(max-width:640px){
    .page:has(> .prodavnice-page){
        padding-top:0;
    }

    .prodavnice-page{
        padding-top:0;
    }
}


/* V4 — PRODAVNICE — mobilno: kartice pune širine */
@media(max-width:640px){
    .prodavnice-grid{
        grid-template-columns:1fr;
        gap:6px;
    }
}


/* V4 — PRODAVNICE — završno mobilno usaglašavanje razmaka */
@media(max-width:640px){
    .page:has(> .prodavnice-page){
        padding-top:0;
    }

    .prodavnice-page{
        padding-top:0;
        padding-bottom:22px;
    }

    .prodavnice-heading{
        margin-bottom:6px;
    }

    .prodavnice-filter{
        margin-bottom:6px;
    }

    .prodavnice-grid{
        grid-template-columns:1fr;
        gap:6px;
    }
}


/* V4 — PRODAVNICE — mobilno: kompaktna unutrašnjost kartice */
@media(max-width:640px){
    .prodavnica-logo{
        padding:6px;
    }

    .prodavnica-card-body{
        padding:8px 6px 6px;
    }

    .prodavnica-card-body h2{
        margin-bottom:4px;
    }

    .prodavnica-card-body p{
        margin-bottom:6px;
    }

    .prodavnica-broj-oglasa{
        padding-top:5px;
    }
}

/* V4 — PRODAVNICE — mobilno: kompaktan unutrašnji rub filter prozora */
@media(max-width:640px){
    .prodavnice-filter > .filters{
        padding:6px;
    }
}

/* V4 — mobilni standard visine kontrola: 30px */
@media(max-width:640px){
    .tab{
        height:30px !important;
        min-height:30px !important;
    }

    .sort select{
        height:30px !important;
        min-height:30px !important;
    }

    .viewbtn{
        height:30px !important;
        min-height:30px !important;
    }
}

/* VELIKI OGLAS — MOBILNO CIJENA I AKCIJE U DVA REDA */
@media(max-width:640px){
    .detail-price-actions{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:6px !important;
    }

    .detail-price-wrap{
        width:100%;
    }

    .detail-actions{
        width:100%;
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px !important;
        justify-content:stretch !important;
    }

    .detail-actions .detail-favorite-form{
        width:100%;
        margin:0;
    }

    .detail-actions .detail-action-btn{
        box-sizing:border-box;
        width:100%;
        min-width:0 !important;
        height:30px !important;
        min-height:30px !important;
        padding:0 4px !important;
        margin:0;
        line-height:28px;
        font-size:9px;
        white-space:nowrap;
    }
}

/* VELIKI OGLAS — MOBILNO KOMPAKTNIJA CIJENA */
@media(max-width:640px){
    .detail-price-big{
        font-size:20px !important;
    }

    .detail-price-wrap{
        gap:6px !important;
        flex-wrap:nowrap !important;
    }
}

/* VELIKI OGLAS — SKLOPIVE INFORMACIONE CJELINE */
.detail-collapse-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    cursor:pointer;
    user-select:none;
}

.detail-collapse-title::after{
    content:"";
    flex:0 0 auto;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:7px solid #29445f;
    transition:transform .15s ease;
}

.detail-collapse-parent.detail-collapsed > .detail-collapse-title::after{
    transform:rotate(-90deg);
}

.detail-collapse-parent.detail-collapsed > :not(.detail-collapse-title){
    display:none !important;
}

@media(max-width:640px){
    .detail-collapse-title{
        min-height:30px;
        margin-bottom:6px !important;
    }

    .detail-collapse-parent.detail-collapsed > .detail-collapse-title{
        margin-bottom:0 !important;
    }
}


/* =========================================================
   V4 — GORNJA ZONA
   Standardna desktop visina = 1 kvadratni oglas/banner
   ========================================================= */
@media (min-width:761px){

    .hero{
        height:269px !important;
        min-height:269px !important;
        max-height:269px !important;
        align-items:stretch !important;
    }

    .hero .categories{
        height:269px !important;
        min-height:269px !important;
        max-height:269px !important;
        box-sizing:border-box;
        overflow:hidden;
    }
.home-categories{
        height:269px !important;
        min-height:269px !important;
        max-height:269px !important;
        box-sizing:border-box;
        overflow:hidden;
    }
}

/* DESKTOP — bez strelica uz Kategorije i naslove filtera */
@media (min-width:761px){

    .home-categories-arrow{
        display:none !important;
    }

    .filters .filter .title > span:last-child{
        display:none !important;
    }
}


/* =========================================================
   V4 BANNERI — NOVI SISTEM POZICIJA
   Desktop osnovna jedinica: 1/4 = jedna kolona oglasa
   ========================================================= */

@media (min-width:761px){

    /* HERO postaje: kategorije 290px + prostor oglasa/banner grida */
    .hero{
        display:grid !important;
        grid-template-columns:290px minmax(0,1fr) !important;
        column-gap:14px !important;
        height:269px !important;
        min-height:269px !important;
        max-height:269px !important;
        align-items:stretch !important;
    }

    .hero > .categories{
        grid-column:1 !important;
        grid-row:1 !important;
        width:100% !important;
        height:269px !important;
        min-height:269px !important;
        max-height:269px !important;
    }

    .so-banner-zone-top{
        grid-column:2 !important;
        grid-row:1 !important;

        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:11px;

        width:100%;
        min-width:0;
        height:269px;
    }

    .so-banner-slot{
        min-width:0;
        height:269px;
        box-sizing:border-box;
        border:1px dashed #aeb9c4;
        border-radius:7px;
        background:#f4f6f8;
        color:#647587;

        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .so-banner-span-1{grid-column:span 1;}
    .so-banner-span-2{grid-column:span 2;}
    .so-banner-span-3{grid-column:span 3;}
    .so-banner-span-4{grid-column:1 / -1;}

    .so-banner-test-label b{
        display:block;
        font-size:20px;
    }

    .so-banner-test-label small{
        display:block;
        margin-top:5px;
        font-size:10px;
        font-weight:400;
    }
}





/* =========================================================
   V4 BANNERI — SIDEBAR ISPOD FILTERA
   Desktop format: 290 × 290
   ========================================================= */

@media (min-width:761px){

    .so-banner-sidebar{
        display:flex;
        width:290px;
        height:290px;
        min-width:290px;
        min-height:290px;
        max-width:290px;
        max-height:290px;
        margin-top:11px;
        box-sizing:border-box;
    }

}



/* =========================================================
   V4 BANNERI — PRODAVNICE
   ========================================================= */

.so-global-banner{
    box-sizing:border-box;
    border:1px dashed #aeb9c4;
    border-radius:7px;
    background:#f4f6f8;
    color:#647587;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.so-global-banner-label b{
    display:block;
    font-size:20px;
}

.so-global-banner-label small{
    display:block;
    margin-top:5px;
    font-size:10px;
}

.so-global-banner-top{
    width:100%;
    height:140px;
    min-height:140px;
    margin-bottom:11px;
}

.so-global-banner-side{
    width:290px;
    height:290px;
    min-width:290px;
    min-height:290px;
    max-width:290px;
    max-height:290px;
    margin-top:11px;
}



/* =========================================================
   V4 BANNERI — STVARNI OGLASNI PROSTOR
   Bez testne sive pozadine i isprekidanog okvira.
   ========================================================= */

.so-banner-slot{
    border:0 !important;
    background:transparent !important;
}

/* Mali razmak između HOME TOP bannera i sadržaja ispod */
@media (min-width:761px){
    .so-banner-zone-top{
        margin-bottom:12px !important;
    }
}

/* =========================================================
   V4 ADSENSE — FORMAT ODREĐUJE includes/banneri.php

   AdSense jedinice imaju vlastite fiksne dimenzije.
   CSS ih ne rasteže i ne mijenja.
   ========================================================= */

/* HOME: tačno postojeća visina */
@media (min-width:761px){
    .so-banner-zone-top,
    .so-banner-zone-top .so-banner-slot{
        height:269px !important;
        min-height:269px !important;
        max-height:269px !important;
    }
}


/* V4 BANNERI — bez testnih podloga i okvira */
.so-banner-zone,
.so-banner-zone-top,
.so-banner-slot,
.so-banner-sidebar,
.so-banner-grid-strip,
.so-global-banner,
.so-global-banner-top,
.so-global-banner-side{
    background:transparent !important;
    background-color:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}


/* =========================================================
   HOME / OGLASI — razmak između reklamnog prostora i sadržaja
   ========================================================= */

@media (min-width:761px){

    .so-banner-zone-top{
        margin-bottom:16px !important;
    }

}


/* =========================================================
   V4 BANNERI — BEZ PLACEHOLDER PODLOGE I OKVIRA
   ========================================================= */

.so-banner-zone,
.so-banner-zone-top,
.so-banner-slot,
.so-banner-sidebar,
.so-banner-grid-strip,
.so-global-banner,
.so-global-banner-top,
.so-global-banner-side,
.so-global-banner-side-column,
.so-global-banner-prodavnice-side,
.so-page-top-banner,
.so-page-top-banner-detail{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-color:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
}

ins.adsbygoogle{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

.so-banner-slot > ins.adsbygoogle,
.so-global-banner > ins.adsbygoogle,
.so-page-top-banner > ins.adsbygoogle{
    margin-left:auto !important;
    margin-right:auto !important;
}


/* =========================================================
   V4 BANNERI — STANDARDNI RAZMAK 11px
   Ne mijenja dimenzije bannera.
   ========================================================= */

.grid > .so-banner-grid-strip{
    margin-top:11px !important;
    margin-bottom:11px !important;
}


/* =========================================================
   V4 — standardni razmak oko gornjeg bannera
   ========================================================= */

.so-page-top-banner-detail{
    margin-top:11px !important;
    margin-bottom:11px !important;
}


/* V4 — fina korekcija TOP bannera OGLASI */
.so-page-top-banner-detail{
    margin-top:11px !important;
    margin-bottom:5px !important;
    padding:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Naš AdSense element nema vlastitu podlogu */
.so-page-top-banner-detail > ins.adsbygoogle{
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
}


/* V4 — OGLASI TOP banner: 11px iznad, bez dodatnog razmaka ispod */
.so-page-top-banner-detail{
    margin-top:11px !important;
    margin-bottom:0 !important;
}


/* =========================================================
   V4 OGLASI — razmak ispod TOP bannera
   Banner već ima svoj standardni razmak.
   ========================================================= */
body.oglasi-mode .so-page-top-banner-detail + .content{
    margin-top:0 !important;
}


/* =========================================================
   V4 DIREKTNI BANNERI — SLIKA BEZ DEFORMACIJE
   Slika se proporcionalno uklapa u postojeći banner prozor.
   ========================================================= */

.so-banner-direct-link,
.so-banner-direct-picture{
    display:flex !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    align-items:center !important;
    justify-content:center !important;
}

.so-banner-direct-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
}


/* =========================================================
   V4 OGLASI — KONAČNE FIKSNE VISINE BANNERA

   TOP OGLASI / DETALJ:
   desktop 140px
   mobilno 100px

   Banner između oglasa:
   desktop horizontalno 140px
   mobilno 100px

   Kvadratni grid 269x269 ostaje nepromijenjen.
   ========================================================= */

@media (min-width:761px){

    .so-page-top-banner-detail{
        height:140px !important;
        min-height:140px !important;
        max-height:140px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .so-page-top-banner-detail > ins.adsbygoogle{
        display:block !important;
        width:100% !important;
        height:140px !important;
        min-height:140px !important;
        max-height:140px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

}



/* =========================================================
   V4 OGLASI — FIKSNI BANNER PROZORI
   TOP OGLASI + TOP DETALJ = 140px
   LISTA između oglasa      = 140px
   Mobilno                  = 100px
   ========================================================= */

@media (min-width:761px){

    .so-page-top-banner.so-page-top-banner-detail{
        height:140px !important;
        min-height:140px !important;
        max-height:140px !important;
        overflow:hidden !important;
    }

    .so-page-top-banner.so-page-top-banner-detail
    > .so-banner-direct-picture,
    .so-page-top-banner.so-page-top-banner-detail
    > .so-banner-direct-link{
        width:100% !important;
        height:140px !important;
        min-height:140px !important;
        max-height:140px !important;
        overflow:hidden !important;
    }

}



/* =========================================================
   V4 DIREKTNI BANNERI — POPUNI CIJELI KUPLJENI PROSTOR
   Dozvoljeno odstupanje uploadovane grafike do 10%.
   Svjesno koristimo fill da ne ostaju prazni rubovi.
   ========================================================= */

.so-banner-direct-link,
.so-banner-direct-picture{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.so-banner-direct-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:fill !important;
}

/* =========================================================
   V4 — DODATNE SPECIFIKACIJE U FILTERIMA
   ========================================================= */

.filter-specifikacije-blok{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid #dfe6ee;
}

.filter-specifikacije-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 0 8px 0;
    padding:0;
    color:#28465f;
    font-size:11px;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    user-select:none;
}

.filter-specifikacije-strelica{
    margin-left:auto;
    font-size:16px;
    line-height:1;
    font-weight:700;
    color:#28465f;
}

.filter-spec-polje{
    margin:0 0 7px 0;
}

.filter-spec-polje:last-child{
    margin-bottom:0;
}

.filter-spec-label{
    margin:0 0 3px 0;
    color:#28465f;
    font-size:10px;
    line-height:1.2;
    font-weight:600;
}

.filter-spec-polje select,
.filter-spec-polje input{
    width:100%;
    box-sizing:border-box;
    color:#000;
}

.filter-spec-polje select option{
    color:#000;
}

.filter-spec-raspon{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:6px;
}

/* SVE je diskretno; stvarno izabrana vrijednost crna */
.filters select{
    color:#7b8790;
}

.filters select.filter-ima-vrijednost{
    color:#000 !important;
}

.filters select option{
    color:#000;
}


/* V4 — DETALJ OGLASA — SVG PIKTOGRAMI SPECIFIKACIJA */
.detail-spec-icon svg{
    display:block;
    width:20px;
    height:20px;
    margin-top:0;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   V4 — JAVNI FILTER — UJEDNAČENI NASLOVI I CHECKBOX TEKST
   ========================================================= */

/* Lokacija, Stanje, Cijena, Vrsta oglasa... */
.filters .filter > .title{
    color:#000;
}

/* Dodatne specifikacije */
.filters .filter-specifikacije-title{
    color:#000;
}

/* Površina (m²), Broj soba, Sprat... */
.filters .filter-spec-label{
    font-size:11px;
    line-height:1.2;
    font-weight:600;
    color:#000;
}

/* Po dogovoru, Besplatno, Akcija, Hitno */
.filters .filter-checkbox-options,
.filters .filter-checkbox-options label{
    color:#000;
}




/* =========================================================
   V4 — ADSENSE IZMEĐU OGLASA
   Samo prostor formata; AdSense renderovanje ne ograničavamo.
   V = kvadratni prikaz 269 px
   H = horizontalni prikaz 140 px
   ========================================================= */

@media (min-width:761px){

    .so-banner-grid-strip.is-kvadratni{
        width:100%;
        height:269px;
        min-height:269px;
        box-sizing:border-box;
    }

    .so-banner-grid-strip.is-horizontalni{
        width:100%;
        height:140px;
        min-height:140px;
        box-sizing:border-box;
    }
}


/* HOME TOP — oznaka pozicije i dimenzija u dva reda */
.home-banner-row i .home-banner-frakcija,
.home-banner-row i .home-banner-dimenzija {
    display:block;
    width:100%;
    text-align:center;
}

.home-banner-row i .home-banner-dimenzija {
    margin-top:4px;
    font-size:10px;
    line-height:1.2;
}


/* HOME TOP — frakcija prvi red, dimenzija drugi red */
.home-banner-row i {
    flex-direction: column !important;
}

.home-banner-row i .home-banner-frakcija,
.home-banner-row i .home-banner-dimenzija {
    display: block !important;
    width: 100%;
    text-align: center;
}

.home-banner-row i .home-banner-frakcija {
    line-height: 1.2;
}

.home-banner-row i .home-banner-dimenzija {
    margin-top: 4px;
    line-height: 1.2;
}


/* HOME TOP — isti prikaz kao oznake na gornjem crtežu */
.home-banner-row > i {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

.home-banner-row > i > strong,
.home-banner-row > i > small {
    display:block !important;
    width:100% !important;
    flex:none !important;
    text-align:center !important;
}

.home-banner-row > i > strong {
    margin:0 0 4px 0 !important;
    line-height:1.1 !important;
}

.home-banner-row > i > small {
    margin:0 !important;
    line-height:1.1 !important;
}


/* =========================================================
   V4 — DIREKTNI BANNERI / MOBILNI PRIKAZ

   1. Desktop ostaje nepromijenjen.
   2. Na mobitelu direktni banner postoji SAMO ako je
      učitana posebna SLIKA_MOBILE.
   3. Direktni mobilni banner potpuno ispunjava 2:1 prostor.
   4. AdSense ovim pravilima nije obuhvaćen.
   ========================================================= */

@media (max-width: 767px) {

    .so-banner-direct-picture.no-mobile {
        display: none !important;
    }

    .so-banner-direct-picture.has-mobile {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 2 / 1 !important;
        overflow: hidden !important;
    }

    .so-banner-direct-picture.has-mobile
    .so-banner-direct-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: fill !important;
    }

}


/* =========================================================
   V4 — ADSENSE MOBITEL 2:1

   Desktop AdSense ostaje potpuno nepromijenjen.

   Na ekranima do 767px:
   - rezervisani prostor je odnos 2:1;
   - širina prati raspoloživu širinu ekrana;
   - visina je polovina stvarne širine;
   - Google sam prikazuje sadržaj oglasa;
   - ne koristimo object-fit niti deformišemo AdSense sadržaj.
   ========================================================= */

@media (max-width: 767px) {

    ins.adsbygoogle.so-adsense-controlled {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2 / 1 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* HOME ima vlastite dinamičke AdSense klase.
       Ovo nadjačava njihov desktop height:269px. */
    .so-banner-zone-top
    ins.adsbygoogle.so-adsense-controlled {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2 / 1 !important;
    }

}


/* =========================================================
   V4 — CENTRALNI MOBILE/TABLET BANNER 2:1

   Desktop:
   - poseban mobilni renderer je potpuno skriven.

   Mobile/tablet do 767px:
   - mobilni renderer je puna raspoloživa širina;
   - format je uvijek 2:1;
   - koristi isključivo SLIKA_MOBILE;
   - desktop grafika se ovdje nikada ne koristi.
   ========================================================= */

.so-mobile-only-banner {
    display: none !important;
}

@media (max-width: 767px) {

    a.so-mobile-only-banner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 2 / 1 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    picture.so-mobile-only-banner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 2 / 1 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    a.so-mobile-only-banner
    picture.so-mobile-only-banner {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }

    picture.so-mobile-only-banner
    .so-banner-direct-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: fill !important;
        margin: 0 !important;
    }
}

/* =========================================================
   V4 — kada postoji poseban mobilni direktni banner,
   desktop renderer se na ekranu do 767px ne prikazuje.
   Desktop iznad 767px ostaje nepromijenjen.
   ========================================================= */

@media (max-width: 767px) {
    .so-desktop-when-mobile-direct {
        display: none !important;
    }
}

/* =========================================================
   V4 — HOME: NEZAVISNI MOBILE/TABLET BANNER

   Desktop:
   - poseban HOME mobile renderer je skriven;
   - postojeća SPAN 1/4–4/4 logika ostaje nepromijenjena.

   Mobile/tablet do 767px:
   - ako postoji direktni banner sa SLIKA_MOBILE,
     prikazuje se samo njegov posebni 2:1 renderer;
   - desktop HOME ćelije tada se ne prikazuju.
   ========================================================= */

.so-banner-home-mobile-only {
    display: none !important;
}

@media (max-width: 767px) {

    .so-banner-home-mobile-only {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .so-home-desktop-when-mobile-direct {
        display: none !important;
    }
}



/* =========================================================
   V4 — MOBILE: DESKTOP SIDEBAR BANNER SE NE PRIKAZUJE
   Sidebar ostaje nepromijenjen na desktopu.
   ========================================================= */
@media (max-width: 767px) {
    .so-banner-sidebar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}