/* ================= 28) SINGLE PROPERTY — sirina sadrzaja =================
Sadrzaj single property stranice (template 19645) bio capiran na 1440px (presiroko). Suzeno na
1200px CENTRIRANO (kao referenca) — naslov, galerija, detalji, opis, adresa, mapa svi na istoj
vertikalnoj liniji. Header je netaknut (ne koristi .e-con-inner). */
body.single-property .e-con > .e-con-inner{ max-width:1200px !important; }
/* Sekcije ispod hera (opis/adresa/mapa/details) imale su unutrasnju kolonu sa eksplicitnim width:792px
pa su bile UZE od galerije. Kolone koje su JEDINO dijete -> puna sirina (1200). Redovi sa vise kolona
(npr. Property Type/Bedrooms — tu je 1 kolona-omotac) ostaju netaknuti u rasporedu. */
body.single-property .e-con > .e-con-inner > .e-con:only-child{ width:100% !important; max-width:100% !important; flex-grow:1 !important; }
/* 360° Virtual Tour sekcija (5d7480a) ima 2 kolone (slika + 360 embed) sa width:792px (uže) — pune na 1200. */
body.single-property .elementor-element-5d7480a > .e-con-inner > .e-con{ width:100% !important; max-width:100% !important; flex-grow:1 !important; }
/* Kolone su imale 10px bocni padding pa su bijele kartice bile 1180 (uvučene) dok je Property Type box
1200 -> ivice se nisu poklapale. Skidamo bocni padding kolone -> sve kartice 1200, iste ivice. */
body.single-property .e-con > .e-con-inner > .e-con{ padding-left:0 !important; padding-right:0 !important; }
/* ================= 29) HOMEPAGE LISTING KARTICA — plavi dijagonalni gradient =================
Listing kartica (.item-wrap) je bila RAVNA var(--rs-blue) (#22406a). Sada isti plavi izgled
ali sa dijagonalnim prelivom (135deg): svjetlije plavo (#4a73ab) gore-lijevo -> nasa plava
(var(--rs-blue)) u sredini -> tamno navy (#0c1c30) dole-desno. Mijenja se SAMO pozadina —
tekst (bijeli) i cijena (zlatna) ostaju iz sek.14. Scope body.home. */
body.home .item-wrap,
body.home .item-header,
body.home .item-header-2{
background-image:linear-gradient(135deg,#4a73ab 0%,var(--rs-blue) 45%,#0c1c30 100%) !important;
background-color:transparent !important;
}
/* MOBILNI: koso 135deg na uskoj visokoj kartici izgleda neuredno -> USPRAVAN gradient
(svijetlo GORE -> tamno DOLE). Mora biti OVDJE, poslije baznog pravila iste specificnosti,
da pobijedi (nas raniji mobilni pokusaj u sek.22 je bio PRIJE ovog pa je gubio). */
@media (max-width:768px){
body.home .item-wrap{ background-image:linear-gradient(180deg,#4a73ab 0%,var(--rs-blue) 45%,#0c1c30 100%) !important; }
}
/* ================= 30) HOMEPAGE SEARCH PANEL + TABOVI — tamna boja =================
Search panel (.houzez-search-builder-wrapper) i tabovi For Rent/For Sale bili su #22406a/#34527e.
Korisnik trazio TAMNU navy boju (#14304f) SOLID (bez gradijenta). Aktivni "All" tab ostaje zlatni
(gold gradient na .nav-link.active) i Search dugme zlatno. Polja ostaju srednje plava (kontrast).
Scope body.home (samo homepage hero search). */
body.home .houzez-search-builder-wrapper{
background:#14304f !important;
background-image:none !important;
}
body.home .houzez-status-tabs .nav-item{ background:#14304f !important; }
body.home .houzez-status-tabs .nav-link:not(.active){
background:#14304f !important;
background-image:none !important;
}
/* AKTIVNI (zlatni) tab — iza njega je virila TEGETNA: roditelj .nav-item ima navy #14304f
(pravilo iznad), a zlatni .nav-link ima margin:1px pa je navy virio kao tanak okvir oko zlata.
Fix: .nav-item ISPOD aktivnog taba oboji u ISTI zlatni gradijent -> nema navy okvira.
(:has podrzano 2026; specificnost jaca od .nav-item iznad pa pobjedjuje.) */
body.home .houzez-status-tabs .nav-item.active,
body.home .houzez-status-tabs .nav-item:has(.nav-link.active){
background:linear-gradient(180deg,var(--rs-gold-2),var(--rs-gold)) !important;
}
/* ================= 31) "LIST YOUR PROPERTY" SEKCIJA — silver umjesto krem =================
Blok 1237f99 (::before, full-bleed) imao je KREM gradient (#f5f0e6...#ded3bc...). Korisnik trazio
SILVER (hladna srebrno-siva), ISTI oblik gradijenta (90deg, svjetlije ivice -> tamniji silver iza
fotke). Slika i raspored ostaju. */
body.home .elementor-element-1237f99::before{
background-image:linear-gradient(90deg,#f1f2f4 0%,#d5d9de 33%,#c0c5cd 60%,#cccfd6 76%,#f2f3f5 100%) !important;
}
/* ================= 32) SINGLE PROPERTY — DARK THEME (samo u dark modu) =================
Vezano za dark toggle (html.rs-dark) — svijetla tema OSTAJE bijela, netaknuta.
Raspored netaknut, samo boje. Kartice ("tabovi") = navy nijansa var(--rs-sp-card).
>>> --rs-sp-card je PROCJENA sa swatcha (#1e2d42) — promijeni SAMO tu vrijednost kad dobijes tacan hex. <<< */
html.rs-dark body.single-property{ --rs-sp-card:#1e2d42; }
html.rs-dark body.single-property #main-wrap{ background:#0b1524 !important; }
html.rs-dark body.single-property .block-wrap{
background:var(--rs-sp-card) !important;
border:1px solid rgba(255,255,255,0.07) !important;
border-radius:12px !important;
}
/* naslovi kartica -> zlatni */
html.rs-dark body.single-property .block-wrap .block-title-wrap,
html.rs-dark body.single-property .block-wrap .block-title-wrap h1,
html.rs-dark body.single-property .block-wrap .block-title-wrap h2,
html.rs-dark body.single-property .block-wrap .block-title-wrap h3,
html.rs-dark body.single-property .block-wrap .block-title-wrap h4{ color:#d9aa4f !important; }
html.rs-dark body.single-property .block-wrap .block-title-wrap{ border-bottom-color:rgba(255,255,255,0.10) !important; }
/* labeli zlatni, vrijednosti svijetle */
html.rs-dark body.single-property .block-wrap strong,
html.rs-dark body.single-property .block-wrap strong *,
html.rs-dark body.single-property .block-wrap .list-lable,
html.rs-dark body.single-property .block-wrap label{ color:#d9aa4f !important; }
html.rs-dark body.single-property .block-wrap,
html.rs-dark body.single-property .block-wrap p,
html.rs-dark body.single-property .block-wrap li,
html.rs-dark body.single-property .block-wrap span,
html.rs-dark body.single-property .block-wrap td,
html.rs-dark body.single-property .block-wrap th,
html.rs-dark body.single-property .block-wrap a{ color:#e6ecf5 !important; }
html.rs-dark body.single-property .block-wrap .property-detail-wrap li,
html.rs-dark body.single-property .block-wrap .detail-wrap li,
html.rs-dark body.single-property .block-wrap .panel-data li{ border-bottom-color:rgba(255,255,255,0.10) !important; }
html.rs-dark body.single-property .block-wrap .detail-wrap{ background:transparent !important; border-color:rgba(255,255,255,0.07) !important; }
/* STATS bar: ikonice zlatne, sublabel muted, vrijednosti svijetle */
html.rs-dark body.single-property .property-overview-wrap .block-wrap i{ color:#d9aa4f !important; }
html.rs-dark body.single-property .property-overview-wrap .block-wrap .hz-meta-label{ color:#93a3b8 !important; }
html.rs-dark body.single-property .property-overview-wrap .block-wrap strong,
html.rs-dark body.single-property .property-overview-wrap .block-wrap strong *{ color:#f2f6fc !important; }
/* hero: naslov bijeli, cijena zlatna, breadcrumb svijetli */
html.rs-dark body.single-property .property-title-wrap h1{ color:#ffffff !important; }
html.rs-dark body.single-property .item-price,
html.rs-dark body.single-property .price{ color:#d9aa4f !important; }
html.rs-dark body.single-property .item-sub-price{ color:#c3d0e0 !important; }
/* ADRESA ispod naslova u DARK temi: bila je rgb(99,99,99) (tamno siva iz teme) pa se "jedva vidjela"
na tamnoj podlozi (korisnik 2026-07-20). Posvijetljena, ikonica pina ostaje zlatna kao akcenat.
Svijetla tema se NE dira — tamo je ista siva sasvim citljiva na bijelom. */
html.rs-dark body.single-property .property-title-wrap .item-address,
html.rs-dark body.single-property .item-address{ color:#dbe4f0 !important; }
html.rs-dark body.single-property .item-address .houzez-icon,
html.rs-dark body.single-property .item-address .icon-pin{ color:var(--rs-gold) !important; }
/* POD-CIJENA (npr. "1,990€/m2") = SKROZ BIJELA; zlatna ostaje samo GLAVNA cijena (korisnik, 2026-07-19).
Zasto je trebalo ovo pravilo: pod-cijena je u markupu `li.item-sub-price > span.price`, pa ju je
`.price` pravilo iznad bojilo ZLATNO — boja sa `li`-ja (#c3d0e0) nije mogla do teksta jer ga
unutrasnji span pregazi. Zato se cilja bas taj span (+ postfix "/m2").
SAMO DARK: u svijetloj temi je pod-cijena siva (#636363) na bijeloj podlozi — bijelo bi nestalo. */
html.rs-dark body.single-property .item-sub-price .price,
html.rs-dark body.single-property .item-sub-price .price-postfix{ color:#ffffff !important; }
html.rs-dark body.single-property .breadcrumb,
html.rs-dark body.single-property .breadcrumb a,
html.rs-dark body.single-property .breadcrumb li{ color:#dbe4f0 !important; }
/* forma (Enquire) */
html.rs-dark body.single-property .block-wrap input,
html.rs-dark body.single-property .block-wrap textarea,
html.rs-dark body.single-property .block-wrap select{
background:#12203a !important; color:#e6ecf5 !important;
border:1px solid rgba(255,255,255,0.12) !important;
}
html.rs-dark body.single-property .block-wrap ::placeholder{ color:#7e8ea3 !important; opacity:1 !important; }
html.rs-dark body.single-property .block-wrap button[type=submit],
html.rs-dark body.single-property .block-wrap .btn-primary{
background:linear-gradient(180deg,#f0c96c,#d9aa4f) !important; color:#1a1205 !important; border:none !important;
}
/* ================= 33) SINGLE PROPERTY — VISI HERO =================
Hero galerija (.property-detail-v2 .property-banner .tab-pane = #pills-gallery) imala je
aspect-ratio 4/1.67 (~501px na 1200px sirine). Povecano na 4/2.35 (~705px) da hero bude
visi. VAZNO: slika je background-size:cover pa se NE razvlaci — samo se normalno kropuje/
centriran, proporcije ostaju normalne. Isti aspect vazi za sve tabove u banneru
(galerija/mapa/video/360) pa je visina konzistentna kad se prebacuje tab. Obican single
template (property-detail-v2). */
body.single-property .property-detail-v2 .property-banner .tab-pane{
aspect-ratio: 4 / 2.35 !important;
}
/* ================= 34) SINGLE PROPERTY — DESCRIPTION + FEATURES JEDNO PORED DRUGOG =================
Description (kontejner 314aa9e) i Features (kontejner 17bd4c9) bili su puna sirina, jedno ispod
drugog (Features skroz dole). JS (Function PHP.txt, is_singular('property')) fizicki premjesti
Features gore do Description i umota oba u .rs-desc-feat-row. Ovaj CSS ih slaze 50/50 pored
jednog drugog, izjednacava visinu bijelih kartica, i lista Features vertikalno (jedan ispod drugog).
Ispod 1024px se vracaju jedno ispod drugog (mobilno). */
.rs-desc-feat-row{ max-width:1200px; margin:0 auto; display:flex; gap:24px; align-items:stretch; }
.rs-desc-feat-row > .e-con{
flex:1 1 0 !important; width:50% !important; max-width:50% !important; margin:0 !important;
padding-left:0 !important; padding-right:0 !important; /* skini 10px kolonski padding -> kartice
dodiruju iste ivice kao stats bar / Details (Description lijevo, Features desno poravnati) */
display:flex !important; flex-direction:column !important;
}
.rs-desc-feat-row > .e-con > .e-con-inner{ max-width:100% !important; height:100%; }
/* izjednacene visine: bijela kartica (.block-wrap) se rastegne na punu visinu kolone */
.rs-desc-feat-row > .e-con > .elementor-widget{ flex:1 1 auto; }
.rs-desc-feat-row > .e-con > .elementor-widget > .elementor-widget-container{ height:100%; }
.rs-desc-feat-row .property-section-wrap{ height:100%; }
.rs-desc-feat-row .block-wrap{ height:100%; }
/* Features vertikalno (jedan ispod drugog) */
.rs-desc-feat-row .elementor-widget-houzez-property-section-features ul{ flex-direction:column !important; }
.rs-desc-feat-row .elementor-widget-houzez-property-section-features ul li{ width:100% !important; flex:0 0 auto !important; }
@media (max-width:1024px){
.rs-desc-feat-row{ flex-direction:column; }
.rs-desc-feat-row > .e-con{ width:100% !important; max-width:100% !important; }
}
/* ================= 35) SINGLE PROPERTY KARTICE — plavi glossy naslov + stakleno tijelo =================
Naslovi SVIH kartica (Description/Features/Details/Address/360/Floor Plans/Video/Enquire...) imaju
isti "glossy dugme" efekat kao nasa zlatna dugmad (sek.2: 180deg gradijent + inset highlight + meka
sjenka), samo PLAVO — svijetlija plava u light, tamna navy u dark temi. Tekst naslova = ZLATNI u
OBJE teme (navy+zlato brend). Tijelo kartice (.block-wrap) = prozirno staklo (backdrop blur) sa
plavom nijansom koja odgovara temi ("transparentno kao header"). Scope = body.single-property
(SVE kartice; layout desc/feat 50/50 ostaje iz sek.34). Stats bar (block-wrap bez naslova)
dobija samo stakleno tijelo (nema naslov-dugme). */
/* --- LIGHT tema --- */
body.single-property .block-wrap{
background:rgba(var(--rs-blue-rgb),0.10) !important;
-webkit-backdrop-filter:blur(12px) saturate(140%) !important;
backdrop-filter:blur(12px) saturate(140%) !important;
border:1px solid rgba(var(--rs-blue-rgb),0.16) !important;
border-radius:14px !important;
box-shadow:0 10px 30px rgba(var(--rs-blue-rgb),0.10) !important;
}
body.single-property .block-title-wrap{
background:linear-gradient(180deg,var(--rs-blue-tab),var(--rs-blue)) !important;
border:1px solid rgba(255,255,255,0.16) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.30) !important; /* drop-shadow uklonjen na zahtjev; zadrzan samo gornji sjaj */
border-radius:10px !important;
padding:13px 20px !important;
margin-bottom:24px !important;
}
body.single-property .block-title-wrap h1,
body.single-property .block-title-wrap h2,
body.single-property .block-title-wrap h3,
body.single-property .block-title-wrap h4{ color:var(--rs-gold-2) !important; margin:0 !important; }
/* Details tabela: skini bez/tan pozadinu i zlatni okvir -> transparentno + suptilna plava linija */
body.single-property .detail-wrap{ background:transparent !important; border-color:rgba(var(--rs-blue-rgb),0.15) !important; }
/* --- DARK tema --- */
html.rs-dark body.single-property .block-wrap{
background:rgba(var(--rs-dark-card-rgb),0.55) !important;
-webkit-backdrop-filter:blur(12px) saturate(140%) !important;
backdrop-filter:blur(12px) saturate(140%) !important;
border:1px solid rgba(255,255,255,0.09) !important;
}
html.rs-dark body.single-property .block-title-wrap{
background:linear-gradient(180deg,#16345a,var(--rs-dark-card)) !important;
border:1px solid rgba(255,255,255,0.10) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.14) !important; /* drop-shadow uklonjen na zahtjev; zadrzan samo gornji sjaj */
}
/* zlatni tekst naslova i u dark (ista nijansa kao light; nadjacava sek.32 gold) */
html.rs-dark body.single-property .block-wrap .block-title-wrap h1,
html.rs-dark body.single-property .block-wrap .block-title-wrap h2,
html.rs-dark body.single-property .block-wrap .block-title-wrap h3,
html.rs-dark body.single-property .block-wrap .block-title-wrap h4{ color:var(--rs-gold-2) !important; }
html.rs-dark body.single-property .detail-wrap{ border-color:rgba(255,255,255,0.09) !important; }
/* ================= 36) SINGLE PROPERTY — STATS BAR SPOJEN SA HERO =================
Stats "tab" (property-overview: ID/Bedrooms/Bathrooms/Garages/m²/Status) bio je odvojen 30px
razmakom od hero slike. Korisnik trazio da bude SPOJEN sa hero-om. Razmak = flex gap:20px na
zajednickom kontejneru (fa4b9b4 > .e-con-inner drzi SAMO hero 185c169 + stats 69f8f1c) + 10px
donji padding hero sekcije. Ukloneno oboje; stats kartici zaravnati GORNJI coskovi + skinut gornji
border da besavno nasjedne na hero (donji coskovi ostaju zaobljeni -> hero+stats = jedna cjelina).
Vazi u obje teme (spoj je nezavisan od boje). */
body.single-property .elementor-element-fa4b9b4 > .e-con-inner{ gap:0 !important; }
body.single-property .elementor-element-185c169{ padding-bottom:0 !important; }
body.single-property .property-overview-wrap .block-wrap{
border-top-left-radius:0 !important;
border-top-right-radius:0 !important;
border-top:none !important;
}
/* ================= 37) MAPA — SILVER UKLONJEN + ZASEBNA KARTICA (odvojena od Address) =================
Istorija: (a) silver puna-sirinska pozadina — UKLONJENA na zahtjev; (b) probano SPAJANJE sa Address
karticom u jednu cjelinu — korisnik ODUSTAO (2026-07-05b), hoce da budu ODVOJENE. Finalno: mapa =
SAMOSTALNA kartica ispod Address-a, sa normalnim razmakom (~40px), u istom stilu kao ostale kartice
(radius 14, plavi border, sjenka). Address kartica NETAKNUTA (original iz sek.35 — obli uglovi, glass).
VAZNO (build-specific): prava VIDLJIVA mapa = widget `90558c2` -> njegov `.elementor-widget-container`
(1200x600); `#houzez-single-listing-map` zna biti 0px (Google map re-render) -> NE gadjati njega.
`overflow:hidden` je KLJUCNO da Google mapa dobije zaobljene coskove. */
body.single-property .elementor-element-90558c2::before{ display:none !important; content:none !important; }
body.single-property .elementor-element-90558c2 > .elementor-widget-container{
border-radius:14px !important; overflow:hidden !important;
border:1px solid rgba(var(--rs-blue-rgb),0.16) !important;
box-shadow:0 12px 30px rgba(var(--rs-blue-rgb),0.12) !important;
}
/* DARK: okvir svijetli (plava se ne vidi na tamnom) */
html.rs-dark body.single-property .elementor-element-90558c2 > .elementor-widget-container{
border-color:rgba(255,255,255,0.10) !important; box-shadow:0 12px 30px rgba(0,0,0,0.45) !important;
}
/* ================= 37b) ADDRESS KARTICA — separator linije kao Details =================
Redovi Address/City/Area imaju liniju na `.list-lined-item` (unutrasnji div) border-bottom.
Houzez default (main.css) = svijetlo #dce0e0 -> jedva vidljivo. Details widget je dobio tamnu
#8b8080 preko Elementor widget-settings (post-19645.css, ID 1eb932e) pa se lijepo vidi; Address
nije dobio nista pa ostaje svijetlo. Ovdje Address dobija ISTU boju kao Details -> linije se
jednako vide (obje teme; #8b8080 je fiksan pa se poklapa i u light i u dark, kao Details).
Scope = Houzez address widget klasa (stabilna, ne random Elementor ID). */
body.single-property .elementor-widget-houzez-property-section-address .list-lined .list-lined-item{
border-bottom-color:#8b8080 !important;
}
/* ================= 38) STATS BAR — vertikalne linije izmedju stavki (fade na oba kraja) =================
Stats bar (property-overview: ID/Bedrooms/Bathrooms/Garages/m²/Status) = `.row.row-cols-md-6 > .col`
(6 kolona). Vertikalna linija LIJEVO od svake kolone osim prve (5 pregrada), centrirana u razmaku
izmedju kolona (col box-ovi su dodirni, g-4 gutter je unutrasnji padding pa left:0 = sredina razmaka).
Linija je VISA od sadrzaja (72px, sadrzaj ~50px) i BLIJEDI na oba kraja (transparent->boja->transparent).
LIGHT = PLAVA (var(--rs-blue), na svijetloj podlozi), DARK = zlatna (plava se ne vidi na tamnoj navy).
`.row-cols-md-6` je jedinstven na single-property (samo stats bar). */
body.single-property .row-cols-md-6 > .col{ position:relative; }
body.single-property .row-cols-md-6 > .col:not(:first-child)::before{
content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:1px; height:72px; pointer-events:none;
background:linear-gradient(180deg, transparent 0%, rgba(var(--rs-blue-rgb),0.60) 50%, transparent 100%);
}
/* dark: zlatna (plava se ne bi vidjela na tamnoj navy podlozi) */
html.rs-dark body.single-property .row-cols-md-6 > .col:not(:first-child)::before{
background:linear-gradient(180deg, transparent 0%, rgba(var(--rs-gold-rgb),0.70) 50%, transparent 100%);
}
/* ================= 39) STATS BAR — STATUS LAMPICA (zelena=aktivna / tamno siva=neaktivna) =================
Lampica DESNO u Status koloni (property-overview). ZELENA + blagi pulse = nekretnina aktivna (u
opticaju); TAMNO SIVA (bez pulse) = vise nije u opticaju. Element `#rs-property-status.rs-status-dot`
dodaje functions.php; stanje se mijenja klasom `is-active` / `is-inactive`. Default = is-active
(zeleno). KASNIJE: app povezuje toggle (mijenja klasu). Col je position:relative (sek.38). */
.row-cols-md-6 > .col .rs-status-dot{
position:absolute; right:20px; top:50%; transform:translateY(-50%);
width:13px; height:13px; border-radius:50%;
}
.rs-status-dot.is-active{ background:#25c65a; animation:rsStatusPulse 2.4s ease-in-out infinite; }
.rs-status-dot.is-inactive{ background:#565c66; box-shadow:none; animation:none; }
@keyframes rsStatusPulse{
0%{ box-shadow:0 0 0 0 rgba(37,198,90,0.55); }
70%{ box-shadow:0 0 0 8px rgba(37,198,90,0); }
100%{ box-shadow:0 0 0 0 rgba(37,198,90,0); }
}
/* ================= 40) MEDIA NASLOVI (360 / VIDEO / FLOOR PLANS) — eyebrow zlatni, bez stakla/trake =================
Sekcije 360 (aabc98c), Video (84323cb) i Floor Plans (58867ff): NEMAJU staklenu karticu ni plavu
title-traku (sek.35); sadrzaj PUN-SIRINSKI (block-wrap padding:0). Naslov IZNAD = eyebrow: DUBLJE
ZLATO (#bd8b1e, bold -> vidljivije na bijeloj) + uppercase + letter-spacing 6px + ::before/::after
zlatne gradijent linije 60px. block-title-wrap centriran (flex justify-content:center). Vertikalni
razmak 76px gore / 46px dole -> naslov "plovi" izmedju dva reda.
Floor Plans (2026-07-05b) PREBACEN sa navy trake (sek.35) na OVAJ eyebrow — isti kao 360/Video.
Vazi u OBJE teme. ⚠️ ID-evi aabc98c/84323cb/58867ff specificni za Elementor build. Naslov tekst iz
templejta. Photos/galerija NEMA naslov (block-title-wrap) — nije dirano (dodavanje = zaseban zadatak). */
body.single-property .elementor-element-aabc98c .block-wrap,
body.single-property .elementor-element-84323cb .block-wrap,
body.single-property .elementor-element-58867ff .block-wrap{
background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important;
}
body.single-property .elementor-element-aabc98c .block-title-wrap,
body.single-property .elementor-element-84323cb .block-title-wrap,
body.single-property .elementor-element-58867ff .block-title-wrap{
background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
padding:0 !important; margin:76px 0 46px !important; display:flex !important; justify-content:center !important;
}
body.single-property .elementor-element-aabc98c .block-title-wrap :is(h1,h2,h3,h4),
body.single-property .elementor-element-84323cb .block-title-wrap :is(h1,h2,h3,h4),
body.single-property .elementor-element-58867ff .block-title-wrap :is(h1,h2,h3,h4){
display:inline-flex !important; align-items:center !important; gap:16px !important;
color:#bd8b1e !important; font-size:14px !important; font-weight:800 !important;
letter-spacing:6px !important; text-transform:uppercase !important; margin:0 !important; background:none !important;
}
body.single-property .elementor-element-aabc98c .block-title-wrap :is(h1,h2,h3,h4)::before,
body.single-property .elementor-element-84323cb .block-title-wrap :is(h1,h2,h3,h4)::before,
body.single-property .elementor-element-58867ff .block-title-wrap :is(h1,h2,h3,h4)::before{
content:'' !important; display:block !important; width:60px !important; height:1px !important; flex:0 0 auto !important;
background:linear-gradient(90deg, transparent, rgba(215,173,69,0.95)) !important; }
body.single-property .elementor-element-aabc98c .block-title-wrap :is(h1,h2,h3,h4)::after,
body.single-property .elementor-element-84323cb .block-title-wrap :is(h1,h2,h3,h4)::after,
body.single-property .elementor-element-58867ff .block-title-wrap :is(h1,h2,h3,h4)::after{
content:'' !important; display:block !important; width:60px !important; height:1px !important; flex:0 0 auto !important;
background:linear-gradient(90deg, rgba(215,173,69,0.95), transparent) !important; }
/* DARK: ukloni tamnu karticu (pozadina oko videa/floorplans/360) + okvir oko naslova. sec.32/35 dark
ih vracaju preko html.rs-dark specificnosti -> nadjacavamo ISTOM specificnoscu (+ ID). Da u dark
izgleda ISTO kao light (samo gold naslov na tamnoj podlozi, sadrzaj pun-sirinski, bez kartice/trake). */
html.rs-dark body.single-property .elementor-element-aabc98c .block-wrap,
html.rs-dark body.single-property .elementor-element-84323cb .block-wrap,
html.rs-dark body.single-property .elementor-element-58867ff .block-wrap{
background:transparent !important; border:none !important; box-shadow:none !important;
/* VAZNO: skini i backdrop-filter (blur+saturate iz sek.35) — inace pravi svjetliji "panel"
iza sadrzaja iako je pozadina prozirna. Bez ovoga se dark razlikuje od light. */
-webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-radius:0 !important;
}
html.rs-dark body.single-property .elementor-element-aabc98c .block-title-wrap,
html.rs-dark body.single-property .elementor-element-84323cb .block-title-wrap,
html.rs-dark body.single-property .elementor-element-58867ff .block-title-wrap{
background:none !important; border:none !important; border-bottom:none !important; box-shadow:none !important;
}
/* PLYR (video) progress-bar u dark: nasa tamna forma-boja (#12203a) je curila na scrubber-input i
pravila cudnu navy traku. Vracamo input na prozirno -> Plyr crta svoj standardni (tanki) trag. */
html.rs-dark body.single-property .plyr input[type=range],
html.rs-dark body .plyr--full-ui input[type=range]{
background:transparent !important; background-color:transparent !important; background-image:none !important;
}
/* PLYR TEMA — zlatni accent + CRNI play u krugu (logo je zlatno-crn). GLOBALNO = 360/video popup
na karticama I single-property video I svuda gdje se Plyr pojavi. */
.plyr{ --plyr-color-main:#d9aa4f !important; }
.plyr__control--overlaid{ background:#d9aa4f !important; border:none !important; } /* zlatni krug */
.plyr__control--overlaid:hover, .plyr__control--overlaid:focus{ background:#f0c96c !important; }
.plyr__control--overlaid svg{ fill:#000 !important; color:#000 !important; } /* crni play trougao */
/* PHOTOS naslov iznad foto-galerije (Elementor image-gallery `80e6c42`) — ta galerija NEMA
block-title-wrap, pa se naslov UMECE preko JS (Function PHP.txt) kao `.rs-photos-eyebrow`; ovdje
isti eyebrow stil kao 360/Video/Floor Plans (gold #bd8b1e, linije, razmak). Radi u obje teme. */
body.single-property .rs-photos-eyebrow{ display:flex !important; justify-content:center !important; margin:76px 0 46px !important; }
body.single-property .rs-photos-eyebrow span{ display:inline-flex !important; align-items:center !important; gap:16px !important; color:#bd8b1e !important; font-size:14px !important; font-weight:800 !important; letter-spacing:6px !important; text-transform:uppercase !important; line-height:1 !important; }
body.single-property .rs-photos-eyebrow span::before{ content:'' !important; display:block !important; width:60px !important; height:1px !important; flex:0 0 auto !important; background:linear-gradient(90deg, transparent, rgba(215,173,69,0.95)) !important; }
body.single-property .rs-photos-eyebrow span::after{ content:'' !important; display:block !important; width:60px !important; height:1px !important; flex:0 0 auto !important; background:linear-gradient(90deg, rgba(215,173,69,0.95), transparent) !important; }
/* ================= 41) "FOR RENT" STATUS OZNAKA — tamnija zelena =================
`.label-status.status-color-18` (Houzez "For Rent" status) bila je svijetla zelena #17c13f pa se
bijeli tekst slabo vidio. Malo potamnjeno na #12a132 (bolji kontrast, jos uvijek jasno zeleno, ne
previse). Site-wide (hero + listing kartice). */
.label-status.status-color-18{ background-color:#12a132 !important; }
/* ================= 42) HERO MEDIA TABOVI — samo jos hide + z-index =================
⚠️ VECINA OVE SEKCIJE JE UKLONJENA 2026-07-19.
Bila je pisana dok su tabovi bili GOLE ZLATNE IKONICE: zlatni gradient na svakoj pilulu, tamna
sjenka, sakrivena i.houzez-icon i vlastite ikone preko ::before (mask-image SVG + tekst "360°").
Tabovi su od 2026-07-19 SAMO TEKST (css/11 sek.63) pa je sve to bilo mrtvo — i STETNO:
- "box-shadow: ... !important" je ONEMOGUCAVAO zlatni bljesak na 3D Tour tabu (css/11 sek.65):
po CSS kaskadi !important autorska deklaracija POBJEDJUJE animaciju, pa animacija nije mogla
da mijenja sjenku i efekta nije bilo (korisnik: "nema tog bljeska");
- "background/border !important" su se bespotrebno tukli sa sek.63.
OSTAJE samo ono sto je i dalje potrebno (vidi ispod). Izgled tabova = css/11 sek.63/64/65. */
/* MAPA je od 2026-07-19 VIDLJIVA (korisnik je trazi u tabovima) — skrivena je bila dok su tabovi
bili gole ikonice ('prazna/duplirana sa sekcijom dole'); sa tekstom 'Map' je jasan i koristan.
STREET VIEW ostaje sakriven: Elementor widget mu crta PRAZAN panel.
Sakriva se LI (nav-item = flex-stavka), ne samo — inace LI ostane 0-sirine ali se flex gap
i dalje racuna oko njega -> neujednacen razmak. (Mobilna traka je izvan .property-banner pa se
krije posebno u css/11 sek.63, tacka 3b.) */
.property-banner .nav-pills li:has(> .nav-link[href="#pills-street-view"]){ display:none !important; }
.property-banner .nav-pills .nav-link[href="#pills-street-view"]{ display:none !important; }
/* z-index: Houzez ima overlay (z-index:1) preko CIJELE slike
koji na klik otvara galeriju; imao je ISTI z-index kao tabovi pa ih je prekrivao -> svaki klik na
tab je otvarao galeriju umjesto da prebaci prikaz. z-index:5 dize tabove iznad njega. */
.property-banner .nav-pills{ z-index:5 !important; }
/* ================= 43) FULLSCREEN GALERIJA (#property-lightbox) — SAMO FOTKE =================
2026-07-20. Korisnik: "full screen ne treba da izgleda ovako, makni kontakt formu s njega.
Treba samo da se vide fotke u uvecanom formatu. Nikakva pozadina."
⛔ RANIJA VERZIJA OVE SEKCIJE JE UKLONJENA: pravila da modal izgleda kao KARTICA (svijetla/tamna
pozadina, zaobljeni uglovi, sjenka, gornja traka sa faded linijom) i cijeli set pravila za IZGLED
KONTAKT FORME u galeriji (boje polja, placeholder, max-visina Message polja...). Sve to je sada
bespredmetno jer forme u galeriji vise nema.
SAD: forma sakrivena, slike preko cijele sirine, bez ikakve pozadine/okvira — samo fotografija na
tamnoj podlozi. Ostaju: zlatne strelice, X za zatvaranje i tastatura (<- ->, vidi inc/08).
NAPOMENA: forma se sakriva CSS-om (ostaje u DOM-u). Ako se ikad zeli i sa servera, u Houzez
Theme Options -> Contact Forms postoji prekidac "Property Page Popup Gallery Form". */
/* okvir modala: bez pozadine, bez kartice */
#property-lightbox .modal-content{
background:transparent !important; border:none !important; border-radius:0 !important;
box-shadow:none !important;
}
#property-lightbox .modal-dialog{ max-width:96vw !important; margin:2vh auto !important; }
/* podloga = skoro crna, da fotografija "iskoci" (Bootstrap default je providniji) */
#property-lightbox.modal{ background:rgba(6,10,16,0.94) !important; }
.modal-backdrop.show{ opacity:.94 !important; background:#060a10 !important; }
/* gornja traka: samo X, bez trake i naslova */
#property-lightbox .modal-header{
background:transparent !important; border:none !important; padding:8px 10px !important;
}
#property-lightbox .modal-header::after{ content:none !important; }
#property-lightbox .modal-header .d-flex{ display:none !important; } /* naslov/brojac u traci */
/* --- X GORE DESNO, na mjesto dugmeta za uvecanje (korisnik 2026-07-20) ---
Dugme "expand" je bilo suvisno (slika je vec preko cijelog ekrana), a X je stajao gore lijevo
IZVAN slike pa je djelovao odvojeno. Sada: expand se gasi, a X preuzima njegovo mjesto i izgled
(zlatni kvadrat gore desno, 40px, na 15px od ivice — iste vrijednosti koje je expand imao).
X se crta kao SVG maska, isto kao strelice (sek.43b) — tako su sva dugmad galerije iz istog
"seta": zlatna pozadina + crni simbol. */
#property-lightbox .btn-expand{ display:none !important; }
#property-lightbox .btn-close{
position:absolute !important; top:15px !important; right:15px !important; z-index:20 !important;
width:40px !important; height:40px !important; margin:0 !important; padding:0 !important;
border:none !important; border-radius:8px !important; opacity:1 !important; filter:none !important;
background:linear-gradient(180deg,var(--rs-gold-2),var(--rs-gold)) !important;
box-shadow:0 6px 18px rgba(0,0,0,0.40) !important;
display:flex !important; align-items:center !important; justify-content:center !important;
transition:transform .15s ease, box-shadow .15s ease !important;
}
#property-lightbox .btn-close:hover{ transform:scale(1.06) !important; box-shadow:0 8px 22px rgba(0,0,0,0.5) !important; }
#property-lightbox .btn-close::before{
content:'' !important; display:block !important; width:18px !important; height:18px !important;
background-color:#1a1205 !important;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71L12 12.01l-6.3-6.3-1.41 1.41 6.3 6.3-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E") !important;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71L12 12.01l-6.3-6.3-1.41 1.41 6.3 6.3-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E") !important;
-webkit-mask-size:contain !important; mask-size:contain !important;
-webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
-webkit-mask-position:center !important; mask-position:center !important;
}
/* ⭐ KONTAKT FORMA — sklonjena; galerija uzima punu sirinu */
#property-lightbox .lightbox-form-wrap,
#property-lightbox .property-form-wrap{ display:none !important; }
#property-lightbox .lightbox-gallery-wrap{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
/* sve unutra bez pozadine */
#property-lightbox .modal-body,
#property-lightbox .lightbox-gallery-wrap,
#property-lightbox .lightbox-gallery,
#property-lightbox .lightbox-slider,
#property-lightbox .slick-list,
#property-lightbox .slick-slide{ background:transparent !important; }
#property-lightbox .modal-body{ padding:0 !important; }
/* fotografija: sto veca, ali cijela u kadru (bez sjecenja) */
#property-lightbox .lightbox-slider img,
#property-lightbox .slick-slide img{
max-height:88vh !important; width:auto !important; max-width:100% !important;
margin:0 auto !important; object-fit:contain !important; display:block !important;
}
/* --- FULLSCREEN: otvara se NA MJESTU, ne skace na vrh, i ne gasi stranicu ---
2026-07-20 (korisnik: "zatamni sve i ne vidi se stranica, a slika je pomjerena u gornji dio
ekrana; neka se otvori tacno gdje su inace fotke").
Uzrok skoka: `.modal-dialog` je imao margin 18px odozgo (Bootstrap default) pa je slika sjedala
uz vrh. Sada je dijalog flex-centriran po visini ekrana -> fotografija ostaje na sredini,
otprilike tamo gdje je i galerija na stranici. Podloga je posvijetljena da se stranica NAZIRE. */
#property-lightbox .modal-dialog{
display:flex !important; align-items:center !important;
min-height:100vh !important; margin:0 auto !important;
}
#property-lightbox .modal-dialog > .modal-content{ width:100% !important; }
#property-lightbox.modal{ background:rgba(6,10,16,0.78) !important; }
.modal-backdrop.show{ opacity:.78 !important; background:#060a10 !important; }
/* ================= 43b) STRELICE GALERIJE — JEDAN IZGLED SVUDA =================
2026-07-20 (korisnik: "strelice da budu zlatna pozadina, crne strelice" + "u FS treba da budu
kao i van njega, standardizuj to").
PRIJE: na stranici su bile PLAVE (#00aeff) kvadratne 40px (Houzez default), a u fullscreen-u
zlatni krugovi — dva razlicita izgleda za istu radnju.
SAD: isto pravilo za obje -> zlatni krug 46px, CRNA strelica.
Strelica se crta kao MASKA (SVG), a ne slovom iz fonta: Houzez tim dugmadima gasi tekst
(font-size:0) pa se glifa ionako ne bi vidjela, a maska daje identican oblik na oba mjesta. */
body.single-property .property-banner .slick-prev,
body.single-property .property-banner .slick-next,
#property-lightbox .slick-prev,
#property-lightbox .slick-next{
width:46px !important; height:46px !important; border-radius:50% !important; z-index:5 !important;
background:linear-gradient(180deg,var(--rs-gold-2),var(--rs-gold)) !important;
box-shadow:0 6px 18px rgba(0,0,0,0.40) !important;
border:none !important; font-size:0 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
transition:transform .15s ease, box-shadow .15s ease !important;
}
body.single-property .property-banner .slick-prev:hover,
body.single-property .property-banner .slick-next:hover,
#property-lightbox .slick-prev:hover,
#property-lightbox .slick-next:hover{
transform:translateY(-50%) scale(1.06) !important;
box-shadow:0 8px 22px rgba(0,0,0,0.5) !important;
}
body.single-property .property-banner .slick-prev{ left:14px !important; }
body.single-property .property-banner .slick-next{ right:14px !important; }
#property-lightbox .slick-prev{ left:14px !important; }
#property-lightbox .slick-next{ right:14px !important; }
/* sama strelica (crna) */
body.single-property .property-banner .slick-prev::before,
body.single-property .property-banner .slick-next::before,
#property-lightbox .slick-prev::before,
#property-lightbox .slick-next::before{
content:'' !important; display:block !important;
width:20px !important; height:20px !important;
background-color:#1a1205 !important; opacity:1 !important;
-webkit-mask-size:contain !important; mask-size:contain !important;
-webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
-webkit-mask-position:center !important; mask-position:center !important;
}
body.single-property .property-banner .slick-prev::before,
#property-lightbox .slick-prev::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4L14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") !important;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 7.4L14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E") !important;
}
body.single-property .property-banner .slick-next::before,
#property-lightbox .slick-next::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 16.6L10 18l6-6-6-6-1.4 1.4L13.2 12z'/%3E%3C/svg%3E") !important;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 16.6L10 18l6-6-6-6-1.4 1.4L13.2 12z'/%3E%3C/svg%3E") !important;
}
/* ================= 43c) MEKO PREBACIVANJE SLIKA U HERO GALERIJI =================
2026-07-20 (korisnik: "kad pomjeram slike instant je, daj mekanu animaciju").
lightSlider pomjera traku slika preko `transform: translate3d(...)`, ali na tom elementu NIJE
bilo tranzicije za `transform` (samo za `opacity`) -> slika je preskakala.
Dodavanjem tranzicije prelaz postaje gladak. 0.45s + `ease` = dovoljno mekano da se vidi smjer
kretanja, a dovoljno brzo da ne usporava listanje.
⚠️ Element koji se pomjera je DIV `.lightSlider` (klase: listing-slider lightSlider lsGrab...),
NE `ul` — prvi pokusaj je ciljao `ul.lightSlider` i nije uhvatio nista. */
body.single-property .property-banner .lSSlideWrapper > .lightSlider,
body.single-property .top-gallery-section .lSSlideWrapper > .lightSlider{
transition:transform .45s ease, opacity .45s ease !important;
}
/* ================= 44) HERO 360 TAB — cist loader preko Realsee "glitcha" =================
Klik na 360 hero tab (#pills-360tour): Realsee (WebGL) viewer se re-inicijalizuje kad postane
vidljiv i nakratko pokaze svoj glitch/loader prije nego tura legne. Realsee je cross-origin pa
se poruka IZNUTRA ne moze ukloniti — samo maskirati. Prekrivamo NASIM cistim brend loaderom
(tamni navy + zlatni spinner + "Ucitavanje 360 ture...") koji se sam sakrije nakon ~2.6s
(logika = Function PHP.txt, is_singular('property')). Tamna baza u obje teme (360/video su tamni). */
#pills-360tour{ position:relative !important; }
#pills-360tour .rs-360-cover{
position:absolute; inset:0; z-index:6;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
background:#0f2440; color:#eaf0f8;
opacity:1; transition:opacity .45s ease;
}
html.rs-dark #pills-360tour .rs-360-cover{ background:var(--rs-dark, #07111c); }
#pills-360tour .rs-360-cover.rs-hide{ opacity:0; pointer-events:none; }
#pills-360tour .rs-360-spin{
width:46px; height:46px; border-radius:50%;
border:3px solid rgba(var(--rs-gold-lux-rgb,215,173,69),0.25); border-top-color:var(--rs-gold-2,#f0c96c);
animation:rs360spin .8s linear infinite;
}
#pills-360tour .rs-360-txt{ font:600 14px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.03em; color:#e7eefb; }
@keyframes rs360spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #pills-360tour .rs-360-spin{ animation:none !important; } }
/* ============================================================
SINGLE PROPERTY — ID (stats bar) KLIK ZA KOPIRANJE
JS = Function PHP.txt (dodaje klasu `.rs-id-copy` na ID strong u `.property-overview-data`).
Klik kopira ID; zelena "Copied!" poruka + zeleno stanje (~1.3s). Copy ikonica (⎘) uz tekst.
============================================================ */
.property-overview-data .rs-id-copy{ cursor:pointer; position:relative; transition:color .15s ease; }
.property-overview-data .rs-id-copy::after{ content:"\2398"; font-size:.82em; margin-left:6px; opacity:.55; vertical-align:2%; }
.property-overview-data .rs-id-copy:hover{ color:#1e9e57; }
.property-overview-data .rs-id-copy:hover::after{ opacity:1; }
.property-overview-data .rs-id-copy:focus-visible{ outline:2px solid #1e9e57; outline-offset:3px; border-radius:3px; }
.property-overview-data .rs-id-copied{ color:#1e9e57 !important; }
.property-overview-data .rs-id-tip{
position:absolute; left:50%; bottom:calc(100% + 8px);
transform:translateX(-50%) translateY(4px);
background:#1e9e57; color:#fff; font:600 11px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.3px;
padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
transition:opacity .18s ease, transform .18s ease; box-shadow:0 4px 12px rgba(0,0,0,.22); z-index:20;
}
.property-overview-data .rs-id-tip::after{
content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
border:5px solid transparent; border-top-color:#1e9e57;
}
.property-overview-data .rs-id-tip.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* ============================================================
SINGLE PROPERTY — LIGHT TEMA: demo-boje (Houzez demo35 look)
(2026-07-06) Preslikano sa demo35.houzez.co single-property: svijetla siva pozadina + bijele
kartice (bez plave/gradijenta). Scope `html:not(.rs-dark)` (SAMO light tema — dark netaknut).
Sirina Description/Features je layout (obje teme). !important jer sec.35 vec boji `.block-wrap`.
- Velika pozadina (okolo) -> #f7f8f9 (demo bg, svijetla hladna siva)
- Tabovi (stats bar + Description/Features/Details/Address) -> #ffffff (demo card, bijelo)
- Description ~63% / Features ~37% (bilo 50/50)
(Ranije probano plava+gradient -> korisnik vratio, pa demo-boje.)
============================================================ */
/* velika pozadina = demo siva */
html:not(.rs-dark) body.single-property,
html:not(.rs-dark) body.single-property #main-wrap{ background-color:#f7f8f9 !important; }
/* (2026-07-21) Demo35 BIJELE kartice su ISKLJUČENE u korist svijetlo-plavog stakla iz sek.35:
prvo info kartice (Description/Features/Details/Address), pa na kraju i stats-traka — sve sada
namjerno padaju na generičko sek.35 pravilo (ista podloga kao kartica kontakt forme).
Ovdje je ostala samo siva pozadina stranice (#f7f8f9, iznad). */
/* Description siri / Features uzi (~63/37) — layout, obje teme */
body.single-property .elementor-element-314aa9e{ flex:1.7 1 0 !important; max-width:none !important; }
body.single-property .elementor-element-17bd4c9{ flex:1 1 0 !important; max-width:none !important; }
/* ================= 45) SINGLE PROPERTY — TELEFON (uspravno) =================
2026-07-20. Na telefonu tema koristi SVOJ blok (`.mobile-top-wrap`), a ne ono sto se vidi na
desktopu — pa nase desktop dorade tu nisu vazile i stranica je izgledala nedovrseno.
STA JE BILO LOSE (izmjereno na 390px):
1) REDOSLIJED obrnut od desktopa: prvo SLIKA, pa tabovi/alatke, pa tek onda naslov i cijena.
Posjetilac je vidio fotku prije nego sto zna sta gleda i posto kosta.
2) Naslov 15px, cijena 16px, pod-cijena 12px — sitno; na desktopu su naslov ~40px i cijena ~34px.
3) Slika 370x208 (16:9) — na uspravnom telefonu prenisko, fotografija gubi utisak.
RJESENJE (samo CSS, bez diranja teme):
- redoslijed se mijenja flex `order`-om na dva mjesta: (a) `.property-view` (mobilni blok) ide
IZNAD `.property-top-wrap` (galerija); (b) unutar mobilnog bloka naslov ide iznad alatki.
Rezultat = isti tok kao na desktopu: naslov/cijena -> tabovi -> slika.
- tipografija priblizena desktopu (naslov 26, cijena 26, pod-cijena 15, adresa 15).
- slika 4:3 umjesto 16:9 (370 -> ~277px visine).
Granica 767.98px = Houzez-ova (`d-md-none`), da se poklopi sa time kad tema prebacuje na mobilni blok. */
@media (max-width:767.98px){
/* --- 1) redoslijed --- */
body.single-property .property-wrap.property-detail-v4,
body.single-property .property-wrap{ display:flex !important; flex-direction:column !important; }
body.single-property .property-wrap > .property-view{ order:1 !important; }
body.single-property .property-wrap > .property-top-wrap{ order:2 !important; }
body.single-property .mobile-top-wrap{ display:flex !important; flex-direction:column !important; }
body.single-property .mobile-top-wrap > .mobile-property-title{ order:1 !important; margin-bottom:14px !important; }
body.single-property .mobile-top-wrap > .mobile-property-tools{ order:2 !important; margin-bottom:10px !important; }
/* --- 2) tipografija (bila presitna) --- */
body.single-property .mobile-property-title .page-title,
body.single-property .mobile-property-title .page-title *{
font-size:26px !important; line-height:1.15 !important; font-weight:700 !important;
}
body.single-property .mobile-property-title .item-price .price{
font-size:26px !important; font-weight:700 !important; line-height:1.1 !important;
}
body.single-property .mobile-property-title .item-sub-price,
body.single-property .mobile-property-title .item-sub-price .price,
body.single-property .mobile-property-title .item-sub-price .price-postfix{ font-size:15px !important; }
body.single-property .mobile-property-title .item-address{ font-size:15px !important; }
/* --- 3) slika uspravnija (4:3 umjesto 16:9): NIJE OVDJE ---
Odnos slike se postavlja u css/11 sek.64, koja se ucitava POSLIJE ove datoteke i ima isto
`!important` — pa bi pravilo odavde bilo pregazeno (i bilo je, pri prvom pokusaju). Telefonski
izuzetak zato stoji uz to pravilo, u css/11 sek.64. */
/* --- 4) strelice malo manje da ne pokrivaju pola fotke --- */
body.single-property .property-banner .slick-prev,
body.single-property .property-banner .slick-next{ width:38px !important; height:38px !important; }
body.single-property .property-banner .slick-prev::before,
body.single-property .property-banner .slick-next::before{ width:17px !important; height:17px !important; }
}
/* ================= 46) FLOOR PLANS — NOVE IKONICE (Rooms / Baths / Size) =================
2026-07-20 (korisnik: "promijeni ove tri ikonice i neka budu zlatne u dark temi").
ZASTO NIJE MOGLO SAMO BOJENJEM: tema tu NE koristi font-ikonice nego PNG SLIKE
(houzez/img/streamline-icon-*.png). PNG se ne moze prebojiti CSS-om, pa se slika gasi i crta se
nasa SVG ikonica preko `::before` (ista tehnika kao strelice galerije i srce u favoritima).
Time se dobija i novi oblik i boja koja prati temu.
KOJA JE KOJA: bira se po IMENU FAJLA u `data-src`/`src` (`:has(...)`) — pouzdanije nego po
redoslijedu, jer redoslijed zavisi od toga sta je uneseno za taj sprat.
⚠️ EWWW lazy-load slikama mijenja `src` u placeholder i pravo ime drzi u `data-src` — zato se
provjeravaju OBA atributa (vidi i raniju istu zamku sa 360/video popupom). */
body.single-property .fw-property-floor-data-wrap img{ display:none !important; }
body.single-property .fw-property-floor-data-wrap::before{
content:'' !important; display:block !important; flex:0 0 auto !important;
width:34px !important; height:34px !important; /* bilo 28 — korisnik trazio krupnije */
background-color:#12233a !important; /* svijetla tema: tamna ikonica */
-webkit-mask-size:contain !important; mask-size:contain !important;
-webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
-webkit-mask-position:center !important; mask-position:center !important;
}
html.rs-dark body.single-property .fw-property-floor-data-wrap::before{
background-color:#ffffff !important; /* tamna tema: BIJELA (prvo probano zlatno, korisnik izabrao bijelo) */
}
/* ROOMS — krevet */
body.single-property .fw-property-floor-data-wrap:has(img[data-src*="double-bed"])::before,
body.single-property .fw-property-floor-data-wrap:has(img[src*="double-bed"])::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h2v6h7V8h5.5A4.5 4.5 0 0 1 21 12.5V19h-2v-2H5v2H3v-4H2V5zm5 2.5A2.25 2.25 0 1 1 7 12a2.25 2.25 0 0 1 0-4.5z'/%3E%3C/svg%3E") !important;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h2v6h7V8h5.5A4.5 4.5 0 0 1 21 12.5V19h-2v-2H5v2H3v-4H2V5zm5 2.5A2.25 2.25 0 1 1 7 12a2.25 2.25 0 0 1 0-4.5z'/%3E%3C/svg%3E") !important;
}
/* BATHS — kada */
body.single-property .fw-property-floor-data-wrap:has(img[data-src*="bathroom-shower"])::before,
body.single-property .fw-property-floor-data-wrap:has(img[src*="bathroom-shower"])::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3a3 3 0 0 0-3 3v6H2v2h1v2a4 4 0 0 0 2 3.46V21h2v-1.05h10V21h2v-1.54A4 4 0 0 0 21 16v-2h1v-2H6V6a1 1 0 0 1 2 0v1h2V6a3 3 0 0 0-3-3z'/%3E%3C/svg%3E") !important;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3a3 3 0 0 0-3 3v6H2v2h1v2a4 4 0 0 0 2 3.46V21h2v-1.05h10V21h2v-1.54A4 4 0 0 0 21 16v-2h1v-2H6V6a1 1 0 0 1 2 0v1h2V6a3 3 0 0 0-3-3z'/%3E%3C/svg%3E") !important;
}
/* SIZE — tlocrt */
body.single-property .fw-property-floor-data-wrap:has(img[data-src*="dimensions-plan"])::before,
body.single-property .fw-property-floor-data-wrap:has(img[src*="dimensions-plan"])::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v7H3V3zm10 0h8v11h-8V3zM3 12h8v9H3v-9zm10 4h8v5h-8v-5z'/%3E%3C/svg%3E") !important;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v7H3V3zm10 0h8v11h-8V3zM3 12h8v9H3v-9zm10 4h8v5h-8v-5z'/%3E%3C/svg%3E") !important;
}
/* ================= 47) STATS BAR NA TELEFONU — KOLONE PORAVNATE =================
2026-07-20. Korisnik: "na single property stranici taj dio nije lijepo poredjan jedan ispod drugoga".
UZROK (mjereno na 390px): kontejner je `row row-cols-sm-2 row-cols-md-6 g-4`. Ispod 576px NIJEDNA
od tih `row-cols-*` klasa ne vazi, pa se kolone sire PO SADRZAJU — otud razlicite sirine i
nepoklopljene ivice izmedju redova:
red 1 (ID / Bedrooms / Bathrooms): lijeve ivice 23, 147, 257 (sirine 124, 110, 110)
red 2 (Garages / m2 / Status): lijeve ivice 23, 138, 252 (sirine 115, 115, 115)
RJESENJE: svaka kolona tacno 1/3 sirine -> oba reda imaju iste ivice, stavke stoje jedna ispod
druge. Zadrzan je Bootstrap-ov sistem razmaka (flex-basis umjesto prelaska na grid), da se ne
poremete postojeci gutteri (`g-4`) i linije izmedju kolona. */
@media (max-width:767.98px){
body.single-property .property-overview-data .row > .col,
body.single-property .property-overview-data [class*="row-cols"] > .col{
flex:0 0 33.3333% !important; max-width:33.3333% !important; width:33.3333% !important;
}
}
/* --- 47b) ...i sve stavke 5% manje (korisnik: "moraju se svi smanjiti za 5% da bi lakse stali") ---
`zoom:0.95` na SADRZAJ kolone (ul), ne na samu kolonu: kolona ostaje tacno 1/3 (poravnanje iz 47a
se ne kvari), a tekst i ikonica se smanje PROPORCIONALNO — i po sirini i po visini, pa dobiju
vise zraka unutar kolone. Jedan broj mijenja sve: 0.95 = -5%. */
@media (max-width:767.98px){
body.single-property .property-overview-data .row > .col > ul{
zoom:0.95 !important;
}
}
/* ================= 48) STATS BAR — ID STAVKA BEZ IKONICA =================
2026-07-20 (korisnik precrtao obje ikonice: "makni to i ostavi samo ID i samu sifru").
Uklonjeno:
- `i.icon-tags` ispred sifre (Houzez ikonica etikete),
- `::after` sa znakom za kopiranje (⎘) iza sifre — dolazi iz sek.45 (ID = klik za kopiranje).
⚠️ KOPIRANJE I DALJE RADI: klik na samu sifru kopira ID, ostaje i "Click to copy ID" na prelazak
misem i zelena potvrda. Uklonjena je SAMO ikonica, ne funkcija. */
.property-overview-data .property-overview-item > i.icon-tags{ display:none !important; }
.property-overview-data .rs-id-copy::after{ content:none !important; margin-left:0 !important; }
/* ============================================================
ID KOPIRANJE u DETAILS tabeli (isti .rs-id-copy sistem kao stats bar; JS = inc/08 + inc/18) 2026-07-21
Details red = Property ID MIA123 -> klik kopira.
============================================================ */
body.single-property .list-lined-item .rs-id-copy{ cursor:pointer; position:relative; transition:color .15s ease; font-weight:700; }
body.single-property .list-lined-item .rs-id-copy::after{ content:2398; font-size:.82em; margin-left:6px; opacity:.55; vertical-align:2%; }
body.single-property .list-lined-item .rs-id-copy:hover{ color:#1e9e57; }
body.single-property .list-lined-item .rs-id-copy:hover::after{ opacity:1; }
body.single-property .list-lined-item .rs-id-copy:focus-visible{ outline:2px solid #1e9e57; outline-offset:3px; border-radius:3px; }
body.single-property .list-lined-item .rs-id-copied{ color:#1e9e57 !important; }
body.single-property .list-lined-item .rs-id-tip{
position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
background:#1e9e57; color:#fff; font:600 11px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.3px;
padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
transition:opacity .18s ease, transform .18s ease; box-shadow:0 4px 12px rgba(0,0,0,.22); z-index:20; }
body.single-property .list-lined-item .rs-id-tip::after{
content:; position:absolute; top:100%; left:50%; transform:translateX(-50%);
border:5px solid transparent; border-top-color:#1e9e57; }
body.single-property .list-lined-item .rs-id-tip.show{ opacity:1; transform:translateX(-50%) translateY(0); }