/* Bazar — skupen stil za funkcionalne strani (prijava, registracija, brskaj, oglas, oddaj-oglas) */
:root {
  --bg: #f0efe9; --surface: #fffdf9; --surface2: #e9e6dc;
  --ink: #1c1a16; --ink-sec: #625d51; --ink-tert: #948e7d;
  --line: #ddd8c9; --accent: #c8401f; --accent-tint: #c8401f14;
  --ok: #2f7d4f; --ok-tint: #2f7d4f14; --danger: #c8401f; --danger-tint: #c8401f14;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161a; --surface: #1f1e23; --surface2: #29282e;
    --ink: #f1eee6; --ink-sec: #b3ab9c; --ink-tert: #766e5f;
    --line: #38343a; --accent: #ff7a4d; --accent-tint: #ff7a4d1c;
    --ok: #5fbf85; --ok-tint: #5fbf8520; --danger: #ff7a4d; --danger-tint: #ff7a4d1c;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
a { color: var(--accent); }

/* Zgornja vrstica, skupna vsem app straneem */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 10; gap: 1rem; flex-wrap: wrap;
}
.brand { font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--ink); }
.brand .tag { font-weight: 600; font-size: .82rem; color: var(--ink-sec); padding-left: .6rem; border-left: 1px solid var(--line); }
.topbar-nav { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.topbar-nav a { color: var(--ink-sec); text-decoration: none; padding: .4rem .6rem; border-radius: 8px; }
.topbar-nav a:hover { color: var(--ink); background: var(--surface2); }
.topbar-nav a.primary { background: var(--accent); color: #fff; font-weight: 700; }
.topbar-nav a.primary:hover { opacity: .92; background: var(--accent); }

.center-wrap { max-width: 460px; margin: 3rem auto; padding: 0 1.25rem; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.35rem 1.5rem; margin-bottom: 1.1rem;
}
.card h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--ink-tert); margin: 0 0 1rem;
}
h1.page-title { font-size: 1.5rem; margin: 0 0 .3rem; }
p.page-sub { color: var(--ink-sec); margin: 0 0 1.5rem; font-size: .92rem; }

.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.field .hint { display: block; font-size: .76rem; color: var(--ink-tert); margin-top: .3rem; font-weight: 400; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }

input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; font-family: inherit; font-size: .92rem; color: var(--ink);
  background: var(--surface2); border: 1px solid var(--line); border-radius: 9px;
  padding: .6rem .75rem; outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 110px; }

/* Zavihki v kartici "Filter" (Vozila V1 Avtomobili, 2026-08-15) — desno od naslova "Filter".
   Osnovno/Oprema/Varnost/Ostalo; trenutno ima vsebino samo Osnovno (obstoječa polja), ostali so
   prazna priprava za kasneje. Aktiven zavihek rahlo "sveti" zeleno (var(--ok), isti zelen ton kot
   drugod v Bazarju, npr. #specCard scrollbar). */
.filter-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.filter-header h2 { margin: 0; }
.filter-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter-tab {
  font-family: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface2);
  color: var(--ink-sec); border-radius: 999px; padding: .35rem .85rem; font-size: .78rem; font-weight: 700;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.filter-tab:hover { color: var(--ink); }
.filter-tab.active {
  background: var(--ok-tint); color: var(--ok); border-color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok-tint), 0 0 10px var(--ok-tint);
}

/* Skupno belo ozadje za vsak sklop povezanih postavk v kartici "Filter" (Vozila V1 Avtomobili,
   2026-08-15) — Letnik od/do, Prevoženi km od/do, Cena od/Cena do/Valuta so vsak svoj sklop.
   NAMENOMA trdo #fff (ne var(--surface)), enako kot Landlord bilanca kartica — vidno enako v vseh
   temah, zato spodaj tudi vse besedilo/vnosna polja EKSPLICITNO prebarvana (ne var(--ink) ipd.,
   ker bi bilo v temni temi svetlo besedilo na belem ozadju nečitljivo). */
.filter-sklop {
  background: #fff; border: 1px solid #e3e0d6; border-radius: 12px;
  padding: .9rem 1rem; margin-bottom: .9rem;
}
.filter-sklop:last-of-type { margin-bottom: 0; }
.filter-sklop .field { margin-bottom: 0; }
.filter-sklop label { color: #4a4740; }
.filter-sklop .hint { color: #837c6c; }
.filter-sklop input[type=number], .filter-sklop select {
  background: #f4f2ec; border: 1px solid #ddd8c9; color: #1c1a16;
}
.filter-sklop input[type=number]:focus, .filter-sklop select:focus { border-color: #c8401f; }
.filter-sklop .od-do-kvadratek { background: #f4f2ec; border-color: #ddd8c9; color: #6b6659; }
.filter-sklop .od-do-kvadratek:hover { border-color: #c8401f; color: #c8401f; }
.filter-sklop .od-do-meni { background: #fff; border-color: #ddd8c9; }
.filter-sklop .od-do-meni button { color: #1c1a16; }
.filter-sklop .od-do-meni button:hover { background: #f4f2ec; color: #c8401f; }

/* Cena od/Cena do/Valuta — Vozila V1 Avtomobili "Filter" (2026-08-15). Na desktopu vse tri v isti
   vrstici; na mobilnem Cena od/do ostaneta stisnjeni v isto (ožjo) vrstico, Valuta pade spodaj v
   svojo (grid-column: 1 / -1 razteg čez oba stolpca). Ožji padding/font na mobilnem, da vrednost kot
   "30000" (npr. 30.000 €) še vedno udobno stane v polovično širino. */
.cena-valuta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; }
@media (max-width: 480px) {
  .cena-valuta-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cena-valuta-grid .field:nth-child(3) { grid-column: 1 / -1; }
  .cena-valuta-grid input[type=number] { padding-left: .5rem; padding-right: 1.9rem; font-size: .82rem; }
  .cena-valuta-grid .od-do-kvadratek { width: 1.4rem; height: 1.4rem; right: .25rem; font-size: .7rem; }
}

/* "od-do" kvadratek + hitri izbirni meni (Vozila V1 Avtomobili — Letnik/Prevoženi km, 2026-08-15) */
.od-do-wrap { position: relative; }
.od-do-wrap input { padding-right: 2.3rem; }
.od-do-kvadratek {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 1.7rem; height: 1.7rem; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface2); cursor: pointer;
  font-size: .8rem; color: var(--ink-sec); line-height: 1;
}
.od-do-kvadratek:hover { border-color: var(--accent); color: var(--accent); }
.od-do-meni {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 8rem; max-height: 220px;
  overflow-y: auto; padding: .3rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
}
.od-do-meni button {
  display: block; width: 100%; text-align: left; padding: .4rem .6rem; border: none; background: none;
  cursor: pointer; border-radius: 6px; font-size: .87rem; color: var(--ink); font-family: inherit;
}
.od-do-meni button:hover { background: var(--surface2); color: var(--accent); }

.price-row { display: flex; gap: .5rem; }
.price-row input[type=number] { flex: 1 1 auto; min-width: 7ch; }
.price-row #valuta { flex: 0 0 auto; width: 5rem; }
.price-row #cenaKvalifikator { flex: 0 0 auto; width: 6.2rem; }

.segmented { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.segmented label {
  flex: 1; text-align: center; padding: .65rem .5rem; font-size: .87rem; font-weight: 600;
  cursor: pointer; color: var(--ink-sec); background: var(--surface2); margin: 0;
  transition: background .15s, color .15s;
}
.segmented label:first-child { border-right: 1px solid var(--line); }
.segmented input { display: none; }
.segmented input:checked + label { background: var(--accent); color: #fff; }

button, .btn { font-family: inherit; cursor: pointer; border-radius: 10px; border: none; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s ease, opacity .15s ease; }
.btn:active { transform: scale(.96); } /* takojšen pritisk-učinek na VSAKEM gumbu, ne glede na trajanje akcije za njim */
.btn-primary { background: var(--accent); color: #fff; padding: .8rem 1.4rem; font-size: .94rem; }
.btn-primary:hover { opacity: .92; color: #fff; }
.btn-primary:disabled { opacity: .5; cursor: default; transform: none; }
.btn-ghost { background: var(--surface2); color: var(--ink); padding: .8rem 1.2rem; font-size: .9rem; border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--ink); }
.btn-block { width: 100%; }

.msg { border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; margin-bottom: 1rem; }
.msg-error { background: var(--danger-tint); border: 1px solid var(--danger); color: var(--danger); }
.msg-ok { background: var(--ok-tint); border: 1px solid var(--ok); color: var(--ok); }

.foot-link { text-align: center; font-size: .85rem; color: var(--ink-tert); margin-top: 1rem; }

/* Brskaj — dvostolpna postavitev (leva=kategorije/filtri, desna=oglasi), glej bazar.md #8.
   margin:0 (ne "0 auto", popravljeno 2026-08-08) — prej se je na širokih zaslonih (>1200px)
   CELOTNA mreža centrirala, kar je pustilo prazen prostor levo od filtrov; zdaj se leva stran
   drži levega roba (znotraj `padding`), namesto da "lebdi" na sredini okna. */
.browse-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; max-width: 1200px; margin: 0; padding: 1.5rem; align-items: start; }
@media (max-width: 860px) { .browse-wrap { grid-template-columns: 1fr; } }
.filters { position: sticky; top: 4.5rem; }
/* Neodvisno pomikanje leve/desne strani na namizju (dodano 2026-08-08) — obe strani postaneta
   lastna, do višine zaslona omejena škatla z lastnim navpičnim drsnikom (isti "sticky" + lastna
   `overflow-y` vzorec kot že ima #specCard znotraj desne strani, glej pokaziSpecKartico() v JS,
   samo zdaj na nivoju celih stolpcev) — pomikanje ene strani (npr. z miškinim kolescem nad njo)
   ne premakne druge. Samo namizje (≤860px že ima lastno vodoravno swipe-drsenje med stranema, glej
   #mobilniDrsnik spodaj — tam sta strani že ločeni, ker nista hkrati vidni). */
@media (min-width: 861px) {
  .filters { position: sticky; top: 4.5rem; max-height: calc(100vh - 4.5rem - 1.5rem); overflow-y: auto; }
  .rezultati-pane { position: sticky; top: 4.5rem; max-height: calc(100vh - 4.5rem - 1.5rem - 3.1rem); overflow-y: auto; }
}

/* Preklop Seznam/Zemljevid + zemljevid rezultatov (dodano 2026-08-08) — glej #kartaPane v brskaj.php.
   Namizje: .prikaz-preklop je SAMOSTOJEN element (2026-08-08, prej znotraj .rezultati-pane — a
   #kartaPane si deli isto mesto z .rezultati-pane in ga je, ko je aktiven, POPOLNOMA prekril,
   torej so bili preklopni gumbi za nazaj na "Seznam" nedosegljivi). Zdaj svoja vrstica mreže NAD
   obema (vedno vidna, ne glede na to, kateri od njiju je trenutno prikazan). Mobilno: #kartaPane
   je TRETJA (skrajno desna) swipe stran, preklop gumbi so tam odveč, glej medije spodaj. */
.prikaz-preklop { display: flex; gap: .4rem; margin-bottom: .9rem; }
.preklop-btn {
  flex: 1; padding: .55rem; border-radius: 9px; border: 1px solid var(--line); background: var(--surface2);
  color: var(--ink-sec); font-weight: 700; font-size: .85rem; cursor: pointer;
}
.preklop-btn.aktiven { background: var(--accent); border-color: var(--accent); color: #fff; }
/* position:relative NA VSEH širinah (ne le namizje) — potreben kot "sidrišče" za absolutno
   pozicioniran #kartaPredogled spodaj (glej ta razdelek), da se drži DNA TE POSTAJE/KARTICE, ne
   kakšnega naključnega bolj oddaljenega prednika. Na namizju to prepiše position:sticky spodaj
   (@media min-width:861px, deklariran KASNEJE v datoteki torej zmaga pri isti specifičnosti). */
#kartaPane { display: none; position: relative; }
#kartaPane.aktiven { display: block; }
#kartaRezultatov { height: 65vh; min-height: 340px; border-radius: 12px; overflow: hidden; }
/* Predogled oglasa na zemljevidu (dodano 2026-08-08) — glej #kartaPredogled v brskaj.php in
   prikaziKartaPredogled() v JS. Ponovno uporabi `.listing-card` (ista postavitev kot v seznamu),
   samo prilagojena širina (100% te kartice namesto 90%/max-width:480px privzetega). z-index:1500 —
   VEČ kot Leafletov privzet z-index:1000 za `.leaflet-bottom` (attribution v spodnjem desnem kotu),
   da kartica ni delno prekrita/prekinjena (isti razlog kot pri #oglasPogledMobilni popravku). */
#kartaPredogled { display: none; position: absolute; left: .8rem; right: .8rem; bottom: .8rem; z-index: 1500; }
#kartaPredogled.aktiven { display: block; }
#kartaPredogled .listing-card { width: 100%; max-width: none; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
@media (min-width: 861px) {
  .browse-wrap { grid-template-rows: auto 1fr; }
  .filters { grid-column: 1; grid-row: 1 / 3; }
  .prikaz-preklop {
    grid-column: 2; grid-row: 1; margin-bottom: 0; align-self: start;
    position: sticky; top: 4.5rem; z-index: 5; background: var(--bg); padding-top: .3rem;
  } /* pripeto tik pod zgornjo vrstico (isti "top" kot .filters/.rezultati-pane) — prej ni bilo
       "sticky", zato je ob pomiku strani zdrsnilo iz vidnega polja. */
  .rezultati-pane { grid-column: 2; grid-row: 2; margin-top: 1.1rem; }
  .rezultati-pane.pane-skrit { display: none; } /* skrije SEZNAM, ko je aktiven Zemljevid ALI Oglas (glej JS nastaviDeljeniPogled) */
  #kartaPane {
    grid-column: 2; grid-row: 2; margin-top: 1.1rem;
    position: sticky; top: calc(4.5rem + 3.1rem); max-height: calc(100vh - 4.5rem - 1.5rem - 3.1rem);
  }
  #kartaPane #kartaRezultatov { height: calc(100vh - 4.5rem - 1.5rem - 3.1rem); min-height: 0; }
}

/* Pogled posameznega oglasa — NAMIZJE (dodano 2026-08-08) — glej #oglasPogled v brskaj.php, isti
   deljeni prostor kot Seznam/Zemljevid (ista celica mreže). Vsebina je <iframe> na oglas.php (ista
   stran kot samostojen ogled — brez podvajanja galerije/specifikacij/sporočil v JS). Skrito na
   mobilnem (glej #oglasPogledMobilni spodaj — ločen element, samo za mobilno, glej bazar.md). */
#oglasPogled { display: none; position: relative; }
#oglasPogled.aktiven { display: block; }
#oglasPogledIframe { width: 100%; height: 100%; border: none; display: block; }
#oglasPogledZapri {
  position: absolute; top: .7rem; right: .7rem; z-index: 10;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: none;
  background: var(--danger); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
@media (min-width: 861px) {
  #oglasPogled {
    grid-column: 2; grid-row: 2; margin-top: 1.1rem;
    position: sticky; top: calc(4.5rem + 3.1rem); height: calc(100vh - 4.5rem - 1.5rem - 3.1rem);
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  }
}
/* Pogled posameznega oglasa — MOBILNO (dodano 2026-08-08, po dveh neuspelih poskusih znotraj
   .browse-wrap — glej bazar.md) — #oglasPogledMobilni je NAMENOMA popolnoma ločen element, statičen
   izven .browse-wrap že v HTML (nikoli premaknjen prek JS), isti "izven scroll-vsebnika" vzorec kot
   že uspešno deluje #mobilniDrsnik spodaj. Preprost pojaven modal: temno ozadje čez cel zaslon +
   bela kartica na sredini, iframe znotraj nje zapolni celotno višino kartice (lasten navpičen drsnik
   znotraj samega oglas.php dokumenta). Skrit na namizju. */
#oglasPogledMobilni { display: none; }
@media (max-width: 860px) {
  #oglasPogledMobilni.aktiven {
    /* z-index:2000 (popravljeno 2026-08-08, prej 200) — Leaflet SAM postavi svoje kontrole
       (`.leaflet-top`/`.leaflet-bottom`, npr. +/− gumba) na z-index:1000, kar je bilo VEČ kot naš
       prejšnji 200 — na mobilnem, kjer je zemljevid (#kartaPane) VEDNO v DOM-u (ni skrit kot na
       namizju, glej #kartaPane.aktiven), so kontrole "presevale" skozi naš modal. Zdaj jasno nad tem. */
    display: flex; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.6);
    align-items: center; justify-content: center; padding: 1rem;
  }
  #oglasPogledMobilniKartica {
    position: relative; width: 100%; height: 100%; max-height: calc(100vh - 2rem);
    background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.45);
  }
  #oglasPogledMobilniIframe { width: 100%; height: 100%; border: none; display: block; }
  #oglasPogledMobilniZapri {
    position: absolute; top: .6rem; right: .6rem; z-index: 10;
    width: 2.3rem; height: 2.3rem; border-radius: 50%; border: none;
    background: var(--danger); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
}
/* Modri okvirček s ceno (posamezen oglas) — s tanko "palčko" navzdol na TOČNO lokacijo oglasa,
   isti "zastavica" princip kot #mapaZastavica v oddaj-oglas.php. Leaflet divIcon dobi
   iconSize:null + iconAnchor:[0,0] (glej JS) — iconSize:null je NUJEN, brez njega Leaflet privzeto
   uporabi 12×12px okvir za ovojnico, kar oklesti ceno (bug 2026-08-08). CSS transform spodaj naredi
   VSO potrebno centriranje, da konica palčke pristane natanko na koordinati. .karta-cena-wrap
   odstrani Leafletov privzet beli kvadratek/okvir ozadja. */
.leaflet-div-icon.karta-cena-wrap { background: none; border: none; }
.karta-cena {
  position: relative; transform: translate(-50%, calc(-100% - 8px));
  background: #1e3a8a; color: #fff; font-weight: 700; font-size: .78rem; padding: .3rem .55rem;
  border-radius: 8px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.karta-cena::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  width: 3px; height: 8px; background: #1e3a8a;
}
.karta-gruca {
  background: var(--ok); color: #fff; font-weight: 800; font-size: .82rem;
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); border: 2px solid #fff;
}

/* Mobilni drsnik levo/desno — VEDNO prisoten na ozkih zaslonih (≤860px, tudi laptop), glej JS.
   Neodvisno navpično drsenje med postajami (popravljeno 2026-08-08, prej se je cela vodoravna
   vrstica pomikala navzdol kot EN kos — .browse-wrap ni imel omejene višine, zato je navpični scroll
   tekel na nivoju STRANI in premikal VSE tri postaje hkrati, čeprav je bila vidna samo ena). Zdaj ima
   `.browse-wrap.swipe-mode` FIKSNO višino (= viewport minus topbar), vsaka postaja pa svoj
   `overflow-y:auto` — scroll znotraj ene postaje ne vpliva na drugi dve (isto načelo kot že velja za
   namizje, glej `.filters`/`.rezultati-pane` `@media min-width:861px` zgoraj). */
@media (max-width: 860px) {
  .browse-wrap.swipe-mode {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    height: calc(100vh - 4.5rem); padding-bottom: 0;
  }
  .browse-wrap.swipe-mode > .filters,
  .browse-wrap.swipe-mode > .rezultati-pane,
  .browse-wrap.swipe-mode > #kartaPane {
    flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
    height: 100%; padding-bottom: 4.5rem;
  }
  .browse-wrap.swipe-mode > .filters,
  .browse-wrap.swipe-mode > .rezultati-pane {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* #kartaPane NAMENOMA `overflow-y: hidden`, NE `auto` kot zgornji dve (popravljeno 2026-08-08) —
     Leaflet zemljevid vsebuje SVOJ lasten pan/zoom (tap na marker, vlečenje ipd.) in ne potrebuje
     dodatnega stranskega navpičnega drsenja (karta vedno zapolni celo postajo, glej #kartaRezultatov
     spodaj). `overflow-y:auto` na tem elementu je povzročil, da mobilni brskalnik dotik na marker
     interpretira kot potencialno POTEZO DRSENJA nadrejenega vsebnika namesto kot tap — klik na marker
     je zato nehal delati (znan konflikt gest pri gnezdenju interaktivnega zemljevida v scroll vsebnik). */
  .browse-wrap.swipe-mode > #kartaPane { overflow-y: hidden; }
  .browse-wrap.swipe-mode > .filters { position: static; }
  /* Na mobilnem sta "seznam" IN "karta" VEDNO oba prikazana (vsak na svoji swipe strani) — preklop
     gumbi (namizna zadeva) se skrijejo. .rezultati-pane.pane-skrit ne velja tu (pravilo je omejeno
     na @media min-width:861px), zato "seznam" ostane normalno viden na svoji swipe postaji tudi,
     ko je na namizju logično "skrit" (npr. medtem ko je na namizju odprt Zemljevid). #oglasPogled
     (namizni element) se na mobilnem sploh ne uporablja, glej #oglasPogledMobilni zgoraj. */
  .prikaz-preklop { display: none; }
  .browse-wrap.swipe-mode > #kartaPane { display: block; }
  /* Karta naj zapolni CELO svojo postajo (ne le 65vh privzete višine, glej osnovno #kartaRezultatov
     pravilo) — zdaj ko ima #kartaPane samo dejansko višino (height:100%, glej zgoraj), enak vzorec
     kot že velja na namizju (#kartaPane #kartaRezultatov v @media min-width:861px). */
  .browse-wrap.swipe-mode > #kartaPane #kartaRezultatov { height: 100%; min-height: 0; }
  /* #kartaPredogled na mobilnem NA VRH namesto na dno (dodano 2026-08-08, Blažev predlog) — na dnu
     ga je delno prekrival #mobilniDrsnik (green thumb, glej z-index:1600 zgoraj — oba blizu dna
     zaslona). Na namizju (brez drsnika) ostane na dnu, glej osnovno #kartaPredogled pravilo zgoraj. */
  #kartaPredogled { top: .8rem; bottom: auto; }
}
#mobilniDrsnik {
  display: none;
  /* z-index:1600 (popravljeno 2026-08-08, prej 50) — od takrat ko #kartaRezultatov na mobilnem
     zapolni CELO postajo (height:100%, glej @media max-width:860px zgoraj) sega zemljevid skoraj do
     dna zaslona, kjer je Leafletov `.leaflet-bottom` (attribution ipd., privzet z-index:1000) višje
     od takratnega 50 — drsnik je bil zato v celoti prekrit. Isti razlog/popravek kot pri
     #oglasPogledMobilni (glej zgoraj) in #kartaPredogled (1500) — zdaj jasno nad vsem. */
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1600;
  height: 16px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line);
  touch-action: none; cursor: pointer;
}
#mobilniDrsnik.show { display: block; }
#mobilniDrsnik .thumb {
  position: absolute; top: -3px; bottom: -3px; left: 0; width: 33.333%; border-radius: 999px;
  background: var(--ok); box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: left .2s ease;
} /* širina palca se ujema s STEVILO_PANOV v JS (glej posodobiDrsnik) — trenutno 3 (filtri/seznam/karta) */
@media (min-width: 861px) { #mobilniDrsnik { display: none !important; } }

/* Navpična drsna palčka kartice "Specifikacije" — zelena kot mobilniDrsnik, da je jasno vidno,
   da vsebina sega naprej navzdol (glej overflow-y:auto v pokaziSpecKartico() v brskaj.php) */
#specCard { scrollbar-width: thin; scrollbar-color: var(--ok) var(--surface2); }
#specCard::-webkit-scrollbar { width: 10px; }
#specCard::-webkit-scrollbar-track { background: var(--surface2); border-radius: 999px; }
#specCard::-webkit-scrollbar-thumb { background: var(--ok); border-radius: 999px; border: 2px solid var(--surface2); background-clip: padding-box; }
#specCard::-webkit-scrollbar-thumb:hover { background: var(--ok); opacity: .9; }

/* Kartica "Nepremičnine" lahko postane precej visoka (4. nivo razpleten na več mestih hkrati,
   glej bazar.md #3a) — notranji drsnik namesto raztezanja cele strani, enak zelen stil kot zgoraj. */
.card.cat-tree[data-koda="N"] { max-height: 65vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ok) var(--surface2); }
.card.cat-tree[data-koda="N"]::-webkit-scrollbar { width: 10px; }
.card.cat-tree[data-koda="N"]::-webkit-scrollbar-track { background: var(--surface2); border-radius: 999px; }
.card.cat-tree[data-koda="N"]::-webkit-scrollbar-thumb { background: var(--ok); border-radius: 999px; border: 2px solid var(--surface2); background-clip: padding-box; }
.card.cat-tree[data-koda="N"]::-webkit-scrollbar-thumb:hover { background: var(--ok); opacity: .9; }

/* Ločena bloka znotraj kartice "Specifikacije" — podkategorije vs. specifikacije */
#specCard .spec-blok {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface2);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
#specCard .spec-blok:last-child { margin-bottom: 0; }
#specCard .spec-blok .cat-tree a:hover:not(.active) { background: var(--surface); }

/* Specifikacije skrčene na ~2 vrstici z gumbom za razširitev (2026-08-08). Viden drsnik desno
   (2026-08-15, Blažev ukaz) — prej trd overflow:hidden brez namiga, da je še kaj skritega spodaj. */
.spec-polja-wrap {
  max-height: 9.3rem; overflow-y: auto; transition: max-height .3s ease;
  scrollbar-width: thin; scrollbar-color: var(--ok) var(--surface2);
}
.spec-polja-wrap::-webkit-scrollbar { width: 8px; }
.spec-polja-wrap::-webkit-scrollbar-track { background: var(--surface2); border-radius: 999px; }
.spec-polja-wrap::-webkit-scrollbar-thumb { background: var(--ok); border-radius: 999px; }
.spec-polja-wrap.odprto { max-height: 60rem; }
.spec-razsiri-btn { display: block; width: 100%; margin-top: .6rem; padding: .5rem; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--accent); font-weight: 700; font-size: .8rem; cursor: pointer; }
.spec-razsiri-btn:hover { background: var(--surface); }

/* Modal "Dodatne lastnosti nepremičnine" — deljen med oddaj-oglas.php (piše v opis) in brskaj.php
   (filter kartica "Filter", glej bazar.md #3c/#3d). oddaj-oglas.php ima še lasten (identičen) kopijo
   v svojem lokalnem <style>, ker je bila zgrajena prej — namerno ne podvojeno vzdrževanje pravil,
   samo dve mesti definicije zaradi vrstnega reda gradnje; razredi/imena so poravnani. */
.modal-overlay { display: flex; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.6); align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.hidden { display: none; }
.modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; max-width: 920px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.3rem 1.5rem 1.6rem; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .2rem; }
.modal-head h2 { margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--ink-tert); cursor: pointer; padding: .1rem .4rem; flex-shrink: 0; }
.modal-close:hover { color: var(--ink); }
.lastnosti-kategorija { margin-top: 1.1rem; }
.lastnosti-kategorija h3 { font-size: .92rem; margin: 0 0 .5rem; }
.lastnosti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; }
@media (max-width: 640px) { .lastnosti-grid { grid-template-columns: 1fr; } }
.lastnost-red { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.dane-par { display: flex; flex-shrink: 0; }
.dane-gumb { padding: .3rem .8rem; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.dane-gumb:first-child { border-radius: 6px 0 0 6px; }
.dane-gumb:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.dane-gumb.aktiven-da { background: var(--ok); color: #fff; border-color: var(--ok); }
.dane-gumb.aktiven-ne { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Oprema vozila — checkbox vrstice (2026-08-15, glej js/oprema-vozila.js). Enostavnejše od
   .lastnost-red (samo kljukica, ne Da/Ne par), sicer ista .lastnosti-grid/.lastnosti-kategorija
   struktura za naslove skupin (Klimatizacija/Notranja oprema). */
.oprema-red { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .85rem; cursor: pointer; }
.oprema-red input[type=checkbox] { flex-shrink: 0; width: 1.05rem; height: 1.05rem; cursor: pointer; }
.filter-sklop .oprema-red { color: #1c1a16; }

/* Kartica "Specifikacije" (generični sistem, VSE kategorije razen V1 avtomobilske "Filter" kartice)
   — 'select' tip zdaj kljukice namesto dropdowna (2026-08-15), glej izrisiSpecPolja v brskaj.php. */
.spec-chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .1rem .8rem; margin-top: .3rem; }

/* Barva vozila — single-select barvni krogi (2026-08-15, glej js/oprema-vozila.js BARVE_VOZILA). */
.barva-vozila-naslov { font-weight: 700; font-size: .85rem; margin-bottom: .6rem; color: #1c1a16; }
.barva-vozila-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .4rem; }
.barva-red { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border-radius: 8px; cursor: pointer; font-size: .82rem; border: 1px solid transparent; color: #1c1a16; }
.barva-red:hover { background: #f4f2ec; }
.barva-red.aktivna { border-color: #c8401f; background: #c8401f14; font-weight: 700; }
.barva-krog { width: 1.15rem; height: 1.15rem; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.2); }
.barva-krog-katerakoli { background: conic-gradient(from 0deg, red, orange, yellow, green, blue, violet, red); }
.stevilo-korak { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.stevilo-korak button { width: 1.9rem; height: 1.9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.stevilo-korak span { min-width: 1.4rem; text-align: center; font-weight: 700; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; position: sticky; bottom: -1.6rem; background: var(--surface); padding-top: .8rem; }

.filters .card { padding: 1.1rem 1.2rem; }
.cat-tree { font-size: .87rem; }
.cat-tree .mod { font-weight: 700; margin: .8rem 0 .3rem; color: var(--ink-tert); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; padding: .3rem .4rem; }
.cat-tree .mod:first-child { margin-top: 0; }
.cat-tree .mod.active { background: var(--accent); color: #fff; }
.cat-tree .mod:hover { color: var(--ink); background: var(--surface2); }
.cat-tree a { display: block; padding: .3rem .4rem; border-radius: 7px; color: var(--ink-sec); text-decoration: none; }
.cat-tree a:hover { background: var(--surface2); color: var(--ink); }
/* Barva izbire je odvisna od globine (2026-08-09, uporabnikova zahteva) — level1 (cat-l1, npr.
   "Elektronika") ostane rdeča/accent kot prej, level2 (cat-l2) temno zelena (--ok), level3 (cat-l3)
   svetlo zelena (--ok-tint, zato temnejše besedilo namesto belega — presvetlo ozadje za belo).
   .active = neposredno kliknjen element; .active-prednik = njegov nadrejeni niz (glej
   izberiKategorijo() v JS) — ISTA barva na obeh, da je viden cel izbran niz, ne samo konec. */
.cat-tree a.active, .cat-tree a.active-prednik { font-weight: 600; }
.cat-tree a.cat-l1.active, .cat-tree a.cat-l1.active-prednik { background: var(--accent); color: #fff; }
.cat-tree a.cat-l2.active, .cat-tree a.cat-l2.active-prednik { background: var(--ok); color: #fff; }
.cat-tree a.cat-l3.active, .cat-tree a.cat-l3.active-prednik { background: var(--ok-tint); color: var(--ink); }
/* Iskalnik kategorij po modulu (2026-08-15, Blažev ukaz) — zelen zadetek na nivo1, NAMENOMA
   isti --ok ton kot cat-l2.active, a ločen razred (iskanje ni "izbira"), glej brskaj.php
   nalozKategorije()/vsebujeBesedo(). */
.cat-tree a.cat-l1.iskalnik-zadetek { background: var(--ok); color: #fff; }
/* --ok-tint (14/20 alpha) je bil premalo viden kot ozadje (2026-08-15, Blažev popravek) — namesto
   njega izrazitejša mešanica 40% --ok, še vedno opazno svetlejša od polne --ok na nivo1. Splošen
   razred (ne vezan na a.cat-l2) — velja tudi za V1 Avtomobili znamke (label.nep-l2/a.nep-l2-toggle,
   glej brskaj.php nalozKategorije(), 2026-08-15), ki imajo drugačno DOM obliko (checkbox-drevo). */
.cat-tree .iskalnik-zadetek-l2 { background: color-mix(in srgb, var(--ok) 40%, var(--surface)); color: var(--ink); }
.mod-iskalnik-vrstica {
  display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .6rem;
  padding: .4rem .55rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 8px;
}
.mod-iskalnik-ikona { font-size: .82rem; opacity: .65; flex-shrink: 0; }
.mod-iskalnik { flex: 1 1 auto; border: none; background: none; padding: 0; font-size: .83rem; color: var(--ink); font-family: inherit; }
.mod-iskalnik:focus { outline: none; }
.mod-iskalnik::placeholder { color: var(--ink-tert); }

.cat-tree a.cat-l1 { cursor: pointer; }
.cat-tree a.cat-l1::after { content: 'odpri →'; float: right; color: var(--accent); font-weight: 700; font-size: .74rem; }
.cat-tree a.cat-l1:has(+ .sub.open)::after { content: 'zapri'; }
.cat-tree .sub { max-height: 0; overflow: hidden; transition: max-height 1.5s ease; }
.cat-tree .sub a { padding-left: 1.1rem; font-size: .84rem; }
/* level3 (cat-l3, npr. "Televizorji" pod "TV, avdio, domači kino") en znak bolj v desno kot level2
   (2026-08-09, uporabnikova zahteva) — vizualno ločen dodaten nivo zamika, ne isti kot level2. */
.cat-tree .sub .sub a.cat-l3 { padding-left: calc(1.1rem + 1ch); }
/* level2 z "vrstami" (level3, npr. Bazar "Mobilni telefoni, oprema" → "Mobilni telefoni" …,
   glej pogovor 2026-08-08) — enak "odpri →"/"zapri" indikator, SAMO če dejansko ima .sub za sabo
   (večina level2 postavk nima vrst in ostane brez indikatorja). */
.cat-tree .sub a.cat-l2:has(+ .sub)::after { content: 'odpri →'; float: right; color: var(--accent); font-weight: 700; font-size: .72rem; }
.cat-tree .sub a.cat-l2:has(+ .sub.open)::after { content: 'zapri'; }
/* Neklikljiva "naslovna" vrstica znotraj level2 seznama (je_naslov=1, npr. "Priljubljeni"/
   "Normalno"/"Eksotični" pod V1 Avtomobili, glej brskaj.php nalozKategorije()) — ISTI zamik/velikost
   kot .cat-l2 <a> (namerno brez dodatnega odmika od sosednjih postavk), a poudarjena in brez kazalca/
   hoverja, ker ni klikljiva. */
.cat-tree .sub .cat-l2-naslov { padding-left: 1.1rem; font-size: .84rem; font-weight: 700; color: var(--ink-tert); cursor: default; user-select: none; margin-top: .3rem; }

/* "Smer" (Nakup/Prodaja, Najem/Oddaja, Bazar Prodaja/Nakup) — dve klikljivi besedi namesto ene
   spojene oznake, glej brskaj.php vrsticaSmer() in aa/update-v10.sql. */
.mod-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mod-row .mod { flex: 1 1 auto; }
.smer-toggle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .15rem 0; }
.smer-sep { color: var(--ink-tert); font-size: .78rem; }
a.smer-word { display: inline-block; padding: .15rem .45rem; border-radius: 6px; color: var(--ink-sec); text-decoration: none; font-size: .8rem; cursor: pointer; }
a.smer-word:hover { background: var(--surface2); color: var(--ink); }
a.smer-word.active { background: var(--accent); color: #fff; font-weight: 700; }

/* .checkbox-line osnovni slog — doslej bil SAMO v oddaj-oglas.php (inline <style>), zato je bil v
   brskaj.php (samo app.css) neoblikovan (glej pogovor 2026-08-08, kljukice "Prikaži kategorije" in
   "Regije" brez tega niso imele niti razmika niti manjše pisave). */
.checkbox-line { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .84rem; color: var(--ink-sec); cursor: pointer; }
.checkbox-line input { width: auto; }

/* Regije (kljukice, večizbirno) — najprej v oddaj-oglas.php, zdaj tudi tu za brskaj.php filter
   "Regije" pod "Država". Višina omejena na ~4 vrstice, preostalo prek navpičnega drsnika. */
.regije-list { max-height: 6.7rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; background: var(--surface2); }
.regije-list .checkbox-line { margin-top: .25rem; }
.regije-list .checkbox-line:first-child { margin-top: 0; }

/* Nepremičnine — večizbirne kljukice namesto enojne izbire (glej bazar.md #3a) */
.cat-tree .checkbox-line.nep-l2 { margin: .3rem 0 0 1.1rem; font-size: .84rem; }
.cat-tree .nep-l2-row { display: flex; align-items: center; gap: .5rem; margin: .3rem 0 0 1.1rem; }
.cat-tree .nep-l2-row input[type=checkbox] { flex-shrink: 0; }
.cat-tree a.nep-l2-toggle { flex: 1; color: var(--ink); text-decoration: none; font-size: .84rem; cursor: pointer; padding: .1rem 0; }
.cat-tree a.nep-l2-toggle:hover { color: var(--accent); }
.cat-tree a.nep-l2-toggle::after { content: 'odpri →'; float: right; color: var(--accent); font-weight: 700; font-size: .76rem; }
.cat-tree a.nep-l2-toggle:has(+ .nep-otroci.open)::after { content: 'zapri'; }
.cat-tree .nep-otroci { margin-left: 2.3rem; }
.cat-tree .checkbox-line.nep-l3 { margin: .18rem 0 0; font-size: .8rem; color: var(--ink-sec); }

/* Kartice oglasov — VODORAVNA postavitev (2026-08-08, zamenjala prejšnjo 2-stolpčno mrežo z navpično
   sliko/opisom): en stolpec kartic, vsaka 90% širine vsebnika (enako na namizju in mobilnem, po
   Blaževi zahtevi — "na laptopu naj bo sprememba enaka"), sredinsko poravnana. Slika ostane LEVO,
   opis se je premaknil DESNO od nje (prej pod sliko) — višina cele kartice = višina slike (slika ima
   fiksno širino + aspect-ratio 4/3, `.body` z `align-items:stretch` se raztegne na isto višino,
   besedilo znotraj navpično centrirano). */
.listing-grid { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.listing-card {
  display: flex; flex-direction: row; align-items: stretch; width: 90%; max-width: 480px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--ink); transition: border-color .15s;
}
.listing-card:hover { border-color: var(--accent); }
/* Slika NIMA več fiksnega aspect-ratio (2026-08-09) — kartica je zrasla (država/regija/kategorija,
   glej .lc-cat spodaj), zato slika `align-items:stretch` na .listing-card samodejno raztegne na
   celotno (zdaj višjo) višino telesa, namesto da bi ostala nizka in nesorazmerna. */
.listing-card .img { flex: 0 0 auto; width: 8.5rem; background: var(--surface2); display: flex; align-items: center; justify-content: center; color: var(--ink-tert); font-size: 1.5rem; overflow: hidden; }
.listing-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card .body { flex: 1 1 auto; min-width: 0; padding: .6rem .75rem; display: flex; flex-direction: column; justify-content: center; gap: .12rem; }
.listing-card .lc-title { font-size: .85rem; font-weight: 700; margin: 0 0 .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-card .lc-price { font-size: .92rem; font-weight: 800; color: var(--accent); margin-bottom: .1rem; }
.listing-card .lc-cat { font-size: .72rem; color: var(--ink-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-card .lc-meta { font-size: .7rem; color: var(--ink-tert); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-tert); }
.empty-state .ic { font-size: 2.2rem; display: block; margin-bottom: .6rem; }

/* Zavihki uporabniškega računa (Moji oglasi / Nastavitve) — glej inc/zavihki_racun.php */
.zavihki-racun { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.zavihki-racun a { padding: .7rem .1rem; font-size: .9rem; font-weight: 600; color: var(--ink-tert); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zavihki-racun a:hover { color: var(--ink); }
.zavihki-racun a.active { color: var(--accent); border-bottom-color: var(--accent); }

.pager { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.pager button { background: var(--surface2); border: 1px solid var(--line); color: var(--ink); padding: .5rem 1rem; font-size: .85rem; }
.pager button:disabled { opacity: .4; cursor: default; }