/* ============================================================
   FABLE — TEMNI NAČIN (dark mode)

   Sloj prepisov, ki se naloži ZA style.min.css in style-child.min.css.
   Aktivira se samo, ko ima <html> atribut data-theme="dark"
   (nastavi ga inline skripta v head.php, preden se stran nariše).

   Privzeti način ostaja svetli — brez atributa ta datoteka ne
   spremeni niti enega pravila.

   Ker izvorna tema ponekod uporablja !important, ga tu uporabljamo
   tudi mi. Selektorji so predponi z html[data-theme="dark"], kar da
   višjo specifičnost od izvornih pravil.
   ============================================================ */

html[data-theme="dark"] {
  /* Ploskve */
  --fd-bg:            #121417;  /* ozadje strani */
  --fd-surface:       #1a1d21;  /* kartice, header, #main, #sidebar */
  --fd-surface-2:     #22262b;  /* dvignjeno / hover / polja */
  --fd-surface-3:     #2b3036;  /* še en nivo (chipi, tabele) */

  /* Obrobe */
  --fd-border:        #2f353c;
  --fd-border-strong: #3d444d;

  /* Besedilo */
  --fd-text:          #e2e6ea;
  --fd-text-muted:    #a6adb6;
  --fd-text-dim:      #7e858e;

  /* Svetla pilula za primarne CTA gumbe.
     Namenoma NI čisto bela: velika svetla ploskev na zelo temni podlagi
     "žari" (halacija). #dfe4ea da proti ozadju strani ~12:1 namesto ~15,5:1
     — še vedno krepko nad AA (4,5:1), a bistveno prijetneje za oči.
     Če želite močneje/šibkeje, spremenite samo ta dva žetona. */
  --fd-solid:         #dfe4ea;
  --fd-solid-hover:   #edf1f5;
  --fd-solid-text:    #14171a;

  /* Poudarki */
  --fd-brand:         #0d9ecc;
  --fd-link:          #4fc3e8;
  --fd-danger:        #ff6b6b;
  --fd-success:       #4ade80;

  /* Nativni gradniki (drsniki, date/select popup, autofill) */
  color-scheme: dark;
}


/* ============================================================
   1) OSNOVA — ogrodje strani
   ============================================================ */

/* POZOR: v teh strukturnih pravilih namenoma uporabljamo background-color
   in NE skrajšane oblike "background". Skrajšana oblika z !important bi
   pobrisala background-image — tudi tistega iz style atributa (npr. hero
   na naslovnici: <section class="hero-section" style="background-image:...">). */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--fd-bg) !important;
  color: var(--fd-text);
}

html[data-theme="dark"] body.search,
html[data-theme="dark"] body.item,
html[data-theme="dark"] body.user,
html[data-theme="dark"] body.user-public-profile,
html[data-theme="dark"] body:not(.search):not(.user):not(.item):not(.user-public-profile) {
  background-color: var(--fd-bg) !important;
}

html[data-theme="dark"] section,
html[data-theme="dark"] body.item section,
html[data-theme="dark"] body.login > section,
html[data-theme="dark"] body.register > section,
html[data-theme="dark"] body.recover > section,
html[data-theme="dark"] body.contact > section,
html[data-theme="dark"] body.item-post > section {
  background-color: var(--fd-bg) !important;
}

/* Hero na naslovnici ima sliko v style atributu in svoj temni prekrivnik
   (.hero-overlay) — barve podlage mu ne vsiljujemo. */
html[data-theme="dark"] section.hero-section {
  background-color: transparent !important;
}

html[data-theme="dark"] body.search #main,
html[data-theme="dark"] body.item #main,
html[data-theme="dark"] body.user #main,
html[data-theme="dark"] body.user-public-profile #main,
html[data-theme="dark"] body.item.item-post #main {
  background-color: var(--fd-surface) !important;
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] body.user #sidebar,
html[data-theme="dark"] body.user-public-profile #sidebar {
  background-color: var(--fd-surface) !important;
}

/* Stran oglasa: kartica ni cel #sidebar, ampak #contact — samo tako pade
   prijava spornega oglasa pod njo (glej style-child.css). */
html[data-theme="dark"] body.item #sidebar {
  background-color: transparent !important;
}

html[data-theme="dark"] body.item #sidebar > #contact.widget-box {
  background: var(--fd-surface) !important;
}

/* Mobilno (do 768 px, ista meja kot v style-child.css): svetla tema tu #main
   in stranskemu stolpcu vzame podlago, stran je enobarvna od roba do roba.
   Temni način jima je pustil barvo kartice, <section> pa ima 15 px roba v
   barvi strani, zato je ob levem in desnem robu ostal temen pas.
   Stran oglasa: kot v svetli temi je pas čez celo širino #sidebar, ne #contact
   (sicer se avatar in gumb dotikata roba škatle). */
@media (max-width: 768px) {
  html[data-theme="dark"] body.search #main,
  html[data-theme="dark"] body.search .search-top-section,
  html[data-theme="dark"] body.item #main,
  html[data-theme="dark"] body.user #main,
  html[data-theme="dark"] body.user-public-profile #main,
  html[data-theme="dark"] body.user #sidebar,
  html[data-theme="dark"] body.user-public-profile #sidebar,
  html[data-theme="dark"] body.item #sidebar > #contact.widget-box {
    background-color: transparent !important;
  }

  html[data-theme="dark"] body.item #sidebar {
    background-color: var(--fd-surface) !important;
  }

  /* Ločnica pod fiksno glavo iskanja je bila svetla (#e8e8e8 iz style-child.css) */
  html[data-theme="dark"] body.search header {
    box-shadow: 0 1px 0 var(--fd-border);
  }
}

/* Gumbi z barvno podlago in belim napisom: moje splošno pravilo
   html[data-theme="dark"] a {color: var(--fd-link)} ima enako specifičnost
   kot npr. ".shop-button-side a" in ker se naloži kasneje, jim je pobralo
   belo barvo. Na barvni podlagi mora napis ostati bel. */
html[data-theme="dark"] .shop-button-side a,
html[data-theme="dark"] .order-now-main a {
  color: #fff !important;
}

/* Naslovi in splošno besedilo */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h2.h1,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] body.search h1,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] label,
html[data-theme="dark"] strong {
  color: var(--fd-text);
}

html[data-theme="dark"] a {
  color: var(--fd-link);
}

html[data-theme="dark"] hr {
  border-color: var(--fd-border);
}

/* Drobtine: v svetli temi so povezave v barvi znamke, na temnem pa je
   posvetljena različica preglasna. Utišamo jih v sivino, trenutna stran
   (zadnja drobtina) ostane najbolj vidna. */
html[data-theme="dark"] div.breadcrumb,
html[data-theme="dark"] ul.breadcrumb,
html[data-theme="dark"] ul.breadcrumb li,
html[data-theme="dark"] ul.breadcrumb li a,
html[data-theme="dark"] ul.breadcrumb li a span {
  color: var(--fd-text-muted);
}

html[data-theme="dark"] ul.breadcrumb li:last-child {
  color: var(--fd-text);
}

html[data-theme="dark"] ul.breadcrumb li a:hover,
html[data-theme="dark"] ul.breadcrumb li a:hover span {
  color: var(--fd-text);
  text-decoration: underline;
}

/* Prazna stanja / pomožno besedilo */
html[data-theme="dark"] .user-items .empty,
html[data-theme="dark"] .user-public-profile-items .empty,
html[data-theme="dark"] p.empty,
html[data-theme="dark"] .item #comments .empty {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text-muted) !important;
}


/* ============================================================
   2) GLAVA (header)
   ============================================================ */

html[data-theme="dark"] header,
html[data-theme="dark"] header.site-header,
html[data-theme="dark"] body.search header,
html[data-theme="dark"] body.home header,
html[data-theme="dark"] body.home header.site-header {
  background-color: var(--fd-surface) !important;
}

/* Iskalni pas na naslovnici je v svetli temi bel na belem (nevidna škatla).
   Na temnem mora prav tako splavati z ozadjem, sicer izpade kot prazen blok. */
html[data-theme="dark"] body.home section.home-search,
html[data-theme="dark"] body.home section.header-ad {
  background-color: var(--fd-bg) !important;
}

html[data-theme="dark"] body.home header.site-header.scrolled,
html[data-theme="dark"] body.mobile-menu-open header.site-header {
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .header-center a,
html[data-theme="dark"] .header-icon,
html[data-theme="dark"] .hamburger-btn,
html[data-theme="dark"] header #logo a,
html[data-theme="dark"] header .nav .my-account > strong {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] header .nav .my-account > span,
html[data-theme="dark"] header .nav a.logout2 {
  color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] .header-center a:hover,
html[data-theme="dark"] .header-icon:hover,
html[data-theme="dark"] .header-login-link:hover,
html[data-theme="dark"] .hamburger-btn:hover,
html[data-theme="dark"] .header-locale-btn:hover {
  background: var(--fd-surface-2) !important;
}

/* Izbirnik jezika v glavi (.header-lang) — podlaga glave se menja s temo */
html[data-theme="dark"] .header-lang .lang-switch > summary {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .header-lang .lang-switch > summary:hover {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .header-lang .lang-switch-list {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .header-lang .lang-switch-opt {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .header-lang .lang-switch-opt:hover {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] .header-locale-btn {
  background: var(--fd-surface) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .header-locale-btn:hover {
  color: var(--fd-text) !important;
  border-color: var(--fd-text-dim) !important;
}

/* Pikice statusa imajo obrobo v barvi glave */
html[data-theme="dark"] .header-status-dot,
html[data-theme="dark"] .hamburger-status-dot {
  border-color: var(--fd-surface) !important;
}

/* --- Logotip ---
   Ta blok velja za OBA načina.

   Če v temi obstaja images/logo.svg, ga logo_header() izriše kot prazen
   <span class="logo-svg">, mi pa mu sliko damo prek background-image.
   Če datoteke ni, se glava vrne na logotip, naložen v administraciji.

   Za temni način uporabimo ISTO datoteko, obrnjeno s filtrom. Ločena
   "temna" datoteka tu ne deluje: kolesar v krogu ni izrez, ampak BELA
   rastrska slika, naslikana čez črn krog. Če prebarvamo samo vektorske
   fill vrednosti, krog postane svetel, kolesar pa ostane bel — se pravi
   nevidan. Grafika je v celoti črno-bela, zato je invert točen: krog
   postane svetel, kolesar temen, napis svetel. */

.header-left #logo .logo-link.with-svg {
  display: block;
  line-height: 0;
}

.header-left #logo .logo-svg {
  display: block;
  height: 48px;
  aspect-ratio: 240.75 / 75;  /* iz viewBox datoteke logo.svg */
  background-image: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

html[data-theme="dark"] .header-left #logo .logo-svg {
  /* brightness pod 1, da logotip ni čisto bel — velika svetla ploskev
     na temnem ozadju sicer žari (enako načelo kot pri --fd-solid) */
  filter: invert(1) brightness(0.88);
}

/* Rebrand 1. 11. 2026: na spletu logotip thatbike iz CGP samo z napisom thatbike™ brez trikotnikov (Luka 1. 11.; svetlo Positive, temno Primary, ™ tudi na mobilnem),
   kot na straneh thatbike-v1 in home-v1. images/logo.svg (BAJK.SI) ostane za pasice »BAJK.SI → thatbike«.
   Aplikacija ima svoj logotip v css/app.css. */
body:not(.is-app) .header-left #logo .logo-svg,
body:not(.is-app) .fp-publish .fp-brand-logo .logo-svg {
  aspect-ratio: 207.71 / 44.12;
  background-image: url(../images/custom_pages/thatbike/thatbike-wordmark-cgp-positive.svg?v=1);
}

body:not(.is-app) .header-left #logo .logo-svg {
  height: 30px;
}

html[data-theme="dark"] body:not(.is-app) .header-left #logo .logo-svg,
html[data-theme="dark"] body:not(.is-app) .fp-publish .fp-brand-logo .logo-svg {
  filter: none;
  background-image: url(../images/custom_pages/thatbike/thatbike-wordmark-cgp-primary.svg?v=1);
}

@media (max-width: 768px) {
  body:not(.is-app) .header-left #logo .logo-svg {
    height: 24px;
  }
}

/* Ime strani ostane v DOM za bralnike zaslona in iskalnike, vizualno skrito */
#logo .logo-svg-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .header-left #logo .logo-svg {
    height: 38px;
  }
}

/* Rezerva: če teme ne poganja SVG, ampak naložena rastrska slika (črna na
   prozornem), jo na temnem obrnemo, sicer bi izginila. */
html[data-theme="dark"] #logo img,
html[data-theme="dark"] #logo .logo-img {
  filter: invert(1);
}


/* ============================================================
   3) MOBILNI MENI
   ============================================================ */

html[data-theme="dark"] .mobile-nav-drawer {
  background: var(--fd-surface) !important;
}

html[data-theme="dark"] .mobile-nav-content,
html[data-theme="dark"] .mobile-nav-group {
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .mobile-nav-user-header {
  background: var(--fd-surface-2) !important;
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .mobile-nav-user-greeting,
html[data-theme="dark"] .mobile-nav-drawer a {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .mobile-nav-drawer a svg {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .mobile-nav-drawer a:hover,
html[data-theme="dark"] .mobile-nav-drawer a:active {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .mobile-nav-logout {
  color: var(--fd-text-dim) !important;
}

/* --- Videz + jezik na dnu mobilnega menija ---
   Velja za OBA načina (enako kot vrstica v nogi): blok je nastal skupaj
   s preklopnikom teme, zato živi tu. */
.mobile-nav-prefs {
  border-bottom: none;
  padding: 8px 0 20px;
}

.mobile-nav-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
}

/* Brez JS preklopnik ne dela — takrat skrijemo celo vrstico, da ne
   ostane sama oznaka "Videz" (razred .fable-js doda skripta v head.php) */
.mobile-nav-pref-row.mobile-nav-pref-theme {
  display: none;
}

html.fable-js .mobile-nav-pref-row.mobile-nav-pref-theme {
  display: flex;
}

.mobile-nav-pref-label {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
}

html[data-theme="dark"] .mobile-nav-pref-label {
  color: var(--fd-text);
}

.mobile-nav-pref-row .language,
.mobile-nav-pref-row .language.language-flags {
  display: inline-flex;
  align-items: center;
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}



/* ============================================================
   4) NOGA (footer) + preklopnik teme
   ============================================================ */

html[data-theme="dark"] footer {
  background: #10161a !important;
}

html[data-theme="dark"] footer .box > a,
html[data-theme="dark"] footer .copy,
html[data-theme="dark"] footer .language,
html[data-theme="dark"] footer .copy a,
html[data-theme="dark"] footer .language a {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] footer .box > a:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] footer .bottom {
  color: var(--fd-text-dim) !important;
}

/* --- Spodnja vrstica noge: preklop teme (levo) + jeziki (desno) ---
   Ta blok velja za OBA načina. Živi tu, ker je vrstica nastala skupaj s
   preklopnikom teme — če bi temni način kdaj odstranili, gre z njim tudi
   ta postavitev in jeziki se vrnejo v prvotno poravnavo. */
footer .footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: 100%;
  float: left;
  clear: both;
  margin: 24px 0 18px 0;
  padding: 18px 0 0 0;
  /* Noga je črna v obeh načinih, zato je črta svetla — ne temna. */
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* Povezave v nogi poravnane levo (Luka, 1. 11. 2026; od 16. 10. do 1. 11. so bile na sredini). Flex
   namesto float, da ostane spodnja vrstica (preklopnik, podpis, jeziki) poravnana kot doslej; razmik je
   v robu, ker presledki med povezavami v predlogi niso enaki. Na telefonu jih responsive.css centrira,
   zato tam levo poravnavo vsili text-align. */
@media screen and (min-width: 768px) {
  footer .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  footer .box > a {
    float: none;
    margin: 0 24px 10px 0;
  }
}

@media screen and (max-width: 767px) {
  footer .box {
    text-align: left;
  }

  footer .box > a {
    margin: 0 16px 8px 0;
  }
}

/* Podpis izvajalca (Vertikala) med preklopnikom teme in jeziki. Barve so
   fiksne, ker je noga črna v obeh načinih. */
footer .fable-footer-credit {
  font-size: 13px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
}

footer .fable-footer-credit a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

footer .fable-footer-credit a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Ikoni Facebook in Instagram (Luka, 1. 11. 2026). Na računalniku desno v
   vrstici povezav, na telefonu pod njimi levo. Tarča je 40 px, ikona 20 px;
   negativni rob poravna ikono z besedilom povezav. Noga je črna v obeh načinih. */
footer .fable-footer-social {
  display: flex;
  align-items: center;
  gap: 4px;
}

footer .fable-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: color .15s, background-color .15s;
}

footer .fable-footer-social a:hover,
footer .fable-footer-social a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

footer .fable-footer-social svg {
  display: block;
}

/* Gumb App Store pred ikonama omrežij (Luka, 4. 11. 2026) po vzoru uradne
   Applove značke: črna podlaga, siva obroba, bel znak, velik napis App Store.
   Barve so fiksne, ker je noga črna v obeh načinih. */
footer .fable-footer-social a.fable-footer-app {
  width: auto;
  height: 38px;
  gap: 6px;
  margin-right: 12px;
  padding: 0 12px 0 9px;
  border: 1px solid #a6a6a6;
  border-radius: 9px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

footer .fable-footer-social a.fable-footer-app:hover,
footer .fable-footer-social a.fable-footer-app:focus-visible {
  background: #000;
  color: #fff;
  border-color: #fff;
}

footer .fable-footer-social a.fable-footer-app svg {
  width: 19px;
  height: 19px;
  margin-top: -2px;
}

footer .fable-footer-app-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  white-space: nowrap;
}

footer .fable-footer-app-text small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

footer .fable-footer-app-text strong {
  margin-top: 1px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 767px) {
  /* Skupina ima -10 px rob za poravnavo ikon; obrobljen gumb poravnamo z besedilom povezav */
  footer .fable-footer-social a.fable-footer-app {
    margin-left: 10px;
  }
}

@media screen and (min-width: 768px) {
  footer .fable-footer-social {
    align-self: flex-start;
    margin: -10px -10px 0 auto;
  }
}

@media screen and (max-width: 767px) {
  footer .fable-footer-social {
    clear: both;
    margin: 6px 0 0 -10px;
  }
}

/* SEO odstavek, ki ga vtičnik izriše za .box, se je doslej dotikal vrstice
   s preklopnikom — damo mu zrak in ga v temnem načinu utišamo, da ni bolj
   izpostavljen od povezav nad njim. */
footer #sep-stext {
  clear: both;
  margin-top: 10px;
}

html[data-theme="dark"] footer #sep-stext {
  color: var(--fd-text-muted);
}

/* --- Izbirnik jezika: temna različica ---
   Osnovni videz je v style-child.css, ker gradnik ni vezan na temni način.
   Tudi tu velja samo za mobilni meni; v nogi ima svojo, od teme neodvisno
   temno različico (noga je črna v obeh načinih). */
html[data-theme="dark"] .mobile-nav-drawer .lang-switch > summary {
  border-color: var(--fd-border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fd-text-muted);
}

html[data-theme="dark"] .mobile-nav-drawer .lang-switch > summary:hover,
html[data-theme="dark"] .mobile-nav-drawer .lang-switch[open] > summary {
  color: var(--fd-text);
}

html[data-theme="dark"] .mobile-nav-drawer .lang-switch-list {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .mobile-nav-drawer .lang-switch-opt {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .mobile-nav-drawer .lang-switch-opt:hover {
  background: var(--fd-surface-3) !important;
}

/* Na ozkih zaslonih vrstico raje centriramo kot razpiramo */
@media screen and (max-width: 600px) {
  footer .footer-bottom-row {
    justify-content: center;
    gap: 14px;
  }

  /* Podpis v svoji vrstici pod preklopnikom teme in jeziki */
  footer .fable-footer-credit {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
}

/* --- Preklopnik teme (svetlo / temno) ---
   Brez JS preklopnik ne more ničesar spremeniti, zato ga privzeto skrijemo;
   razred .fable-js doda inline skripta v head.php. */
.fable-theme-switch {
  display: none;
}

/* Samo POSTAVITEV — brez barv.
   Barve določa kontekst: noga je črna v obeh načinih, mobilni meni pa se
   menja s temo. Če bi bile barve tu, bi jih zaradi specifičnosti
   (html.fable-js .fable-theme-switch = 0-2-1) kontekstna pravila težko
   povozila; ravno na to sem se prvič ujel. */
html.fable-js .fable-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  float: none;
  margin: 0;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  line-height: 1;
}

.fable-theme-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: none;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fable-theme-opt svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
}

.fable-theme-opt:focus-visible {
  outline: 2px solid #0d9ecc;
  outline-offset: 2px;
}

/* Samo mobilni meni: tam se podlaga menja s temo. V nogi je podlaga črna
   v obeh načinih, zato ima preklopnik svojo, od teme neodvisno različico v
   style-child.css — in ta pravila je namenoma ne smejo povoziti. */
html[data-theme="dark"] .mobile-nav-drawer .fable-theme-switch {
  border-color: var(--fd-border-strong);
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .mobile-nav-drawer .fable-theme-opt {
  color: var(--fd-text-muted);
}

html[data-theme="dark"] .mobile-nav-drawer .fable-theme-opt:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--fd-text);
}

html[data-theme="dark"] .mobile-nav-drawer .fable-theme-opt[aria-pressed="true"] {
  background: var(--fd-surface-3);
  color: var(--fd-text);
  box-shadow: none;
}



/* ============================================================
   5) ISKANJE — vrh strani, filtri, SMF gradniki
   ============================================================ */

html[data-theme="dark"] .search-top-section,
html[data-theme="dark"] .search-title-right .see_by,
html[data-theme="dark"] .see_by ul {
  background: var(--fd-surface) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .see_by ul a,
html[data-theme="dark"] .see_by label,
html[data-theme="dark"] .search-title-right .see_by {
  color: var(--fd-text) !important;
}

/* Kontrola za razvrščanje nosi razreda .btn.btn-secondary, zato je
   podedovala barvo sekundarnega gumba (v svetli temi teal #056786, pri nas
   posvetljena v --fd-link). Rezultat je bil moder "Razvrsti po:" in bel
   "Priporočeno". Gre za kontrolo z besedilom, ne za povezavo, zato jo v
   celoti poenotimo na navadno barvo besedila.
   Selektor ima namenoma tri razrede — tako premaga pravilo za
   .btn.btn-secondary ne glede na vrstni red v datoteki. */
html[data-theme="dark"] .see_by.btn.btn-secondary,
html[data-theme="dark"] .see_by.btn.btn-secondary > span,
html[data-theme="dark"] .see_by.btn.btn-secondary > label,
html[data-theme="dark"] .see_by.btn.btn-secondary > label i {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .search-title-count,
html[data-theme="dark"] .h1-mobile-count {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] body.search #sidebar .filters,
html[data-theme="dark"] #sidebar .filters {
  background: var(--fd-surface) !important;
}

html[data-theme="dark"] body.search #sidebar .filters h3,
html[data-theme="dark"] body.search #sidebar .filters h3:first-of-type,
html[data-theme="dark"] #sidebar h3 {
  color: var(--fd-text) !important;
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] #sidebar a,
html[data-theme="dark"] #sidebar .price,
html[data-theme="dark"] #sidebar .plugin-hooks h6,
html[data-theme="dark"] .user-sidebar-greeting {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] body.user #sidebar a {
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] #sidebar a.logout {
  color: var(--fd-danger) !important;
}

/* Znacka BETA ob menijski postavki (stranski meni racuna in mobilni predal).
   Pravilo mora premagati "#sidebar a" (ID), zato tudi tu !important. */
html[data-theme="dark"] .nav-beta {
  background: linear-gradient(135deg, #0d9ecc 0%, #6d5efc 100%) !important;
  box-shadow: 0 1px 6px rgba(109, 94, 252, .35) !important;
  color: #fff !important;
}

/* Mobilna iskalna vrstica */
html[data-theme="dark"] .mobile-search-input-wrap {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .mobile-search-input {
  background: transparent !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .mobile-search-actions {
  border-top-color: var(--fd-border) !important;
}

html[data-theme="dark"] .mobile-search-actions .mobile-filter-btn,
html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn,
html[data-theme="dark"] .mobile-sticky-filter-bar .mobile-filter-btn,
html[data-theme="dark"] .mobile-sticky-filter-bar .mobile-sort-btn {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .mobile-search-actions .mobile-filter-btn i,
html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn i,
html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn label,
html[data-theme="dark"] .mobile-sticky-filter-bar .mobile-sort-btn label {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .mobile-search-actions .mobile-filter-btn:active,
html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn:active {
  background: var(--fd-surface-3) !important;
  border-color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] .mobile-sticky-filter-bar {
  background: var(--fd-surface) !important;
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn ul,
html[data-theme="dark"] .mobile-sticky-filter-bar .mobile-sort-btn ul {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn ul li a,
html[data-theme="dark"] .mobile-sticky-filter-bar .mobile-sort-btn ul li a {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn ul li a:hover,
html[data-theme="dark"] .mobile-search-actions .mobile-sort-btn ul li a.current {
  background: var(--fd-surface-3) !important;
}

/* SMF combobox (filtri) */
html[data-theme="dark"] #sidebar .smf-combo-trigger,
html[data-theme="dark"] #sidebar .smf-acc-cf-search,
html[data-theme="dark"] #sidebar select.smf-mobile-cat-select {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-trigger:hover {
  border-color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-label,
html[data-theme="dark"] #sidebar .smf-combo-search,
html[data-theme="dark"] #sidebar .smf-mobile-cat-label,
html[data-theme="dark"] #sidebar .smf-acc-title,
html[data-theme="dark"] #sidebar .smf-acc-header-label,
html[data-theme="dark"] #sidebar .smf-acc-icon,
html[data-theme="dark"] #sidebar .smf-acc-cf-search input {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-search {
  background: transparent !important;
}

html[data-theme="dark"] #sidebar .smf-combo-search::placeholder {
  color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-arrow {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-dropdown {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-option,
html[data-theme="dark"] #sidebar .smf-acc-section .smf-combo-option,
html[data-theme="dark"] #sidebar .smf-country-combo .smf-combo-option .fable-country,
html[data-theme="dark"] #sidebar .smf-country-combo .smf-chip .fable-country {
  color: var(--fd-text) !important;
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-option:hover {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-option.smf-opt-selected,
html[data-theme="dark"] #sidebar .smf-acc-section .smf-combo-option.smf-opt-selected {
  background: #33404a !important;
}

html[data-theme="dark"] #sidebar .smf-combo-option.smf-opt-selected:hover {
  background: #3c4a56 !important;
}

html[data-theme="dark"] #sidebar .smf-no-results {
  color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] #sidebar .smf-chip {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] #sidebar .smf-chip-x {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] #sidebar .smf-chip-x:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-dropdown::-webkit-scrollbar-track,
html[data-theme="dark"] #sidebar .smf-acc-section .smf-combo-dropdown::-webkit-scrollbar-track {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] #sidebar .smf-combo-dropdown::-webkit-scrollbar-thumb,
html[data-theme="dark"] #sidebar .smf-acc-section .smf-combo-dropdown::-webkit-scrollbar-thumb {
  background: var(--fd-border-strong) !important;
}

html[data-theme="dark"] #sidebar .smf-acc-header {
  border-top-color: var(--fd-border) !important;
}

html[data-theme="dark"] #sidebar .smf-acc-cf-container {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

/* Aktivni filtri (bubbles) */
html[data-theme="dark"] .smf-bubble {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .smf-bubble:hover {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] .smf-bubble-x {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .smf-bubble-x:hover,
html[data-theme="dark"] .smf-clear-filters:hover,
html[data-theme="dark"] .smf-bubbles-toggle:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .smf-clear-filters,
html[data-theme="dark"] .smf-bubbles-toggle {
  color: var(--fd-text-muted) !important;
}

/* "Ghost" gradient na koncu vrstice z bubbli */
html[data-theme="dark"] #smf-bubbles-wrap::after {
  background: linear-gradient(to right, rgba(18, 20, 23, 0), var(--fd-bg)) !important;
}

/* Mobilni sticky gumbi filtrov */
html[data-theme="dark"] .smf-mobile-apply {
  background: var(--fd-surface) !important;
  border-top-color: var(--fd-border) !important;
}

html[data-theme="dark"] .smf-mobile-reset-btn {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

/* Skeleton med nalaganjem */
html[data-theme="dark"] .smf-skeleton-bone {
  background: var(--fd-surface-3) !important;
}


/* ============================================================
   6) SEZNAMI OGLASOV (kartice)
   ============================================================ */

/* Kartice oglasov so v svetli temi bele na beli podlagi — praktično
   nevidne ploskve. Na temnem morajo zato ostati prosojne in prevzeti
   ozadje vsebnika, sicer izpadejo kot izstopajoče škatle. */
html[data-theme="dark"] .listing-grid .listing-card {
  background: transparent !important;
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .no-results-card {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

/* Izpostavljeni oglasi so v svetli temi brez podlage (izstopajo z značko in
   rdečo ceno), zato jih tudi temni način ne obarva */
html[data-theme="dark"] .premium-list li.listing-card,
html[data-theme="dark"] li.listing-card.premium {
  background: transparent !important;
}

html[data-theme="dark"] .listing-card .listing-basicinfo a,
html[data-theme="dark"] .listing-grid .listing-basicinfo a,
html[data-theme="dark"] body.search .listing-grid .listing-basicinfo .title,
html[data-theme="dark"] .listing-list a,
html[data-theme="dark"] .swiper-slide-title-solo,
html[data-theme="dark"] .swiper-slide-title-bold,
html[data-theme="dark"] .swiper-slide-title-regular,
html[data-theme="dark"] .element-card-bold,
html[data-theme="dark"] .element-card-big-bold,
html[data-theme="dark"] .swiper-general-header-right a,
html[data-theme="dark"] a.similar-ads-view-all {
  color: var(--fd-text) !important;
}

/* Naslovi swiper kartic na naslovnici: cena je krepka, naslov nekoliko tišji */
html[data-theme="dark"] .swiper-slide-title-regular {
  color: var(--fd-text-muted) !important;
}

/* Slike kartic imajo v svetli temi sivo senco, ki je na temnem umazana */
html[data-theme="dark"] .swiper-slide img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .listing-card .currency-value,
html[data-theme="dark"] body.search .listing-grid .listing-attributes .currency-value,
html[data-theme="dark"] .item-price {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .listing-list .listing-card .currency-value {
  color: #ff7a7a !important;
}

html[data-theme="dark"] .listing-card .listing-attributes a,
html[data-theme="dark"] .listing-list .desc,
html[data-theme="dark"] body.search .listing-list .listing-card .desc,
html[data-theme="dark"] .similar_ads .fast-info,
html[data-theme="dark"] .row.details {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .no-results-title {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .no-results-divider {
  border-top-color: var(--fd-border) !important;
}

html[data-theme="dark"] .fi_make_favorite.fi_make:not(.is_favorite) span {
  color: var(--fd-text-dim) !important;
}

/* --- Privzeti nadomestni sliki ---
   Obe sta svetlo sivi in na temnem izpadeta kot bel blok. Namesto novih
   datotek ju pretvorimo s filtrom; v svetli temi ostaneta nespremenjeni.
   Selektorja uporabljata *=, da ujameta vse zapise poti (tema jih izpisuje
   relativno in prek osc_base_url()) tudi z morebitnim ?v= na koncu.

   "Ni fotografije": svetlo siva podlaga z nekoliko temnejšo ikono —
   obrnemo in posvetlimo => podlaga ~#1b1b1b, ikona ~#343434. */
html[data-theme="dark"] img[src*="no_photo.gif"] {
  filter: invert(1) brightness(1.85);
  /* Senco je treba izrecno odstraniti: .listing-card .listing-thumb img ima
     box-shadow rgba(99,99,99,.2), invert(1) pa poleg slike obrne tudi njo —
     iz sive sence nastane svetel sij okoli ploščice. Enako velja za
     ploščice znamk na naslovnici. */
  box-shadow: none !important;
}

/* Privzeta profilna slika: siva podlaga z BELO silhueto. Tu obračanje ne
   pride v poštev (silhueta bi postala črna in bi izginila) — samo
   potemnimo in okrepimo kontrast, tako da silhueta ostane svetlejša od
   podlage => podlaga ~#1f1f1f, silhueta ~#343434. */
html[data-theme="dark"] img[src*="default-user-image.png"] {
  filter: brightness(0.28) contrast(1.35);
}

/* Sponzorirane kartice */
html[data-theme="dark"] li.adsm-native-card {
  background: #1b2430 !important;
}

html[data-theme="dark"] li.adsm-native-card:hover {
  background: #212c3a !important;
}

/* Logotipi znamk so vektorski (SVG) in skoraj v celoti črni na prozornem,
   zato jih obrnemo — postanejo svetli.
   POZOR: filter deluje na celoten element, torej TUDI na njegovo ozadje.
   Ploščica je sama slika (background: #f3f3f3), zato podlago nastavimo na
   "predobrnjeno" vrednost #ddd9d4, ki se po invert(1) izriše kot #22262b
   (= --fd-surface-2). */
html[data-theme="dark"] .home-brands-custom .swiper-slide img,
html[data-theme="dark"] .home-brands-custom .simple-prod .img-wrap > a img {
  background: #ddd9d4 !important;
  /* brightness pod 1 zniža tudi belino logotipov, ne le ploščice */
  filter: invert(1) brightness(0.9);
  /* Senco je treba izrecno odstraniti: splošno pravilo za .swiper-slide img
     jo doda, invert(1) pa jo iz temne obrne v svetlo — okoli ploščic se
     pokaže svetel sij. V svetli temi te znamke sence prav tako nimajo. */
  box-shadow: none !important;
}

html[data-theme="dark"] #home-cats {
  background-color: var(--fd-bg) !important;
}

html[data-theme="dark"] #home-cats a {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] #home-cats a strong,
html[data-theme="dark"] #related-searches a:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .counter-search {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] body.home button.search-button {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .search-bar {
  background: transparent !important;
}


/* ============================================================
   7) STRAN OGLASA (item)
   ============================================================ */

html[data-theme="dark"] body.item h1 .price {
  background: #2f2a17 !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] #description .item-hook h2,
html[data-theme="dark"] #description .item-hook h3,
html[data-theme="dark"] .element-ogl p {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .desc.desc-collapsed::after {
  background: linear-gradient(transparent, var(--fd-surface)) !important;
}

html[data-theme="dark"] .read-more-toggle,
html[data-theme="dark"] .toggle-more {
  color: var(--fd-link) !important;
}

html[data-theme="dark"] .read-more-toggle:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .item #comments {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .item #comments .comment h3 {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .item #comments .comment p {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .item #comments .reply-text {
  color: var(--fd-text-dim) !important;
}

/* Podobni oglasi: brez ozadja. Na desktopu ima izvorno pravilo
   (znotraj @media min-width:769px) background #f5f5f5, kar na temnem
   izpade kot svetel pas — tu ga popolnoma odstranimo, tako da se pokaže
   ozadje strani. Na mobilnem je pas že prosojen. */
html[data-theme="dark"] body.item .similar_ads,
html[data-theme="dark"] body.item .similar_ads .listing-card-list.listing-grid,
html[data-theme="dark"] .similar_ads .listing-grid .listing-card {
  background: transparent !important;
}

html[data-theme="dark"] .similar_ads .listing-grid .listing-card {
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .similar-ads-show-more {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .similar-ads-show-more:hover {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] .bordered-box,
html[data-theme="dark"] .title-has-actions,
html[data-theme="dark"] .user-extra,
html[data-theme="dark"] .user-sidebar-main {
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] button#report-toggle {
  background: #3a1f1f !important;
  color: #f0b4b4 !important;
}

html[data-theme="dark"] .croatiannotice {
  background: #3a1f1f !important;
  color: #f0b4b4 !important;
}

html[data-theme="dark"] p.tag-active {
  background: #17301a !important;
  color: #9fe6a4 !important;
  border-color: #2c5a31 !important;
}

html[data-theme="dark"] p.tag-expired {
  background: #3a1f1f !important;
  color: #f0b4b4 !important;
  border-color: #6a3232 !important;
}


/* ============================================================
   8) UPORABNIŠKE STRANI, STATISTIKA, FORUM
   ============================================================ */

html[data-theme="dark"] .user-card,
html[data-theme="dark"] .widget-box,
html[data-theme="dark"] .mark_as .select-box-label,
html[data-theme="dark"] .read-only-fields,
html[data-theme="dark"] .eden,
html[data-theme="dark"] form[name="user-public-profile-search"] {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .widget-box li a {
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .widget-box li li a:hover {
  background: var(--fd-surface-3) !important;
  border-color: var(--fd-surface-3) !important;
}

html[data-theme="dark"] .side-username h2 {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] p.side-more a,
html[data-theme="dark"] body .im-threads .im-title a {
  color: var(--fd-link) !important;
}

html[data-theme="dark"] .user-info-button {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .user-info-button:hover {
  background: #3a4653 !important;
}

html[data-theme="dark"] .user-img-button .btn.btn-primary,
html[data-theme="dark"] .user-buttons-custom {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .user-img-button .btn.btn-primary:hover,
html[data-theme="dark"] .user-buttons-custom:hover {
  background: #3a4653 !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .user-img-button .btn.btn-secondary {
  color: var(--fd-text) !important;
}

/* Statistika ogledov / kontaktov */
html[data-theme="dark"] .bajk-vstats-trigger {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text-muted) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .bajk-vstats-wrap:hover .bajk-vstats-trigger,
html[data-theme="dark"] .bajk-vstats-wrap:focus-within .bajk-vstats-trigger {
  background: var(--fd-surface-3) !important;
  color: var(--fd-link) !important;
}

html[data-theme="dark"] .bajk-cstats-trigger {
  background: #16281f !important;
  color: #7fd6ad !important;
  border-color: #2b4d3c !important;
}

html[data-theme="dark"] .bajk-cstats-wrap:hover .bajk-cstats-trigger,
html[data-theme="dark"] .bajk-cstats-wrap:focus-within .bajk-cstats-trigger {
  background: #1d3529 !important;
  color: #9fe6c4 !important;
}

html[data-theme="dark"] .bajk-vstats-disclaimer {
  color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] body.user #sidebar .bajk-sidebar-stats {
  background: var(--fd-surface) !important;
  border-top-color: var(--fd-border) !important;
}

html[data-theme="dark"] .bajk-sidebar-stats-title,
html[data-theme="dark"] .bajk-sidebar-stats-total .bajk-sidebar-stats-label,
html[data-theme="dark"] .bajk-stats-total .bajk-stats-label,
html[data-theme="dark"] .bajk-stats-total .bajk-stats-val,
html[data-theme="dark"] .bajk-sidebar-stats-val,
html[data-theme="dark"] .bajk-stats-val {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .bajk-sidebar-stats-label,
html[data-theme="dark"] .bajk-stats-label {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .bajk-sidebar-stats-title,
html[data-theme="dark"] .bajk-sidebar-stats-total,
html[data-theme="dark"] .bajk-stats-total,
html[data-theme="dark"] .bajk-stats-table thead th,
html[data-theme="dark"] .bajk-sidebar-stats-table tr,
html[data-theme="dark"] .bajk-stats-table tbody tr {
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .bajk-stats-table tbody tr:hover {
  background: var(--fd-surface-2) !important;
}

/* Forum na javnem profilu */
html[data-theme="dark"] #forum-activity,
html[data-theme="dark"] a.frmr-profile-forum-btn {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] a.frmr-profile-forum-btn {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] a.frmr-profile-forum-btn:hover {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .frmr-sidebar-title,
html[data-theme="dark"] .frmr-profile-post-title,
html[data-theme="dark"] a.frmr-profile-forum-link,
html[data-theme="dark"] a.frmr-profile-post-item:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .frmr-sidebar-title i,
html[data-theme="dark"] a.frmr-profile-forum-btn i,
html[data-theme="dark"] .frmr-profile-post-meta .frmr-meta-dot {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] a.frmr-profile-post-item {
  border-bottom-color: var(--fd-border) !important;
}

/* Osclass Pay promocije */
html[data-theme="dark"] .osp-item-promos .osp-elem .osp-data,
html[data-theme="dark"] .osp-item-promos .osp-elem:hover .osp-data {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .osp-item-promos .osp-elem .osp-extra,
html[data-theme="dark"] .osp-item-promos .osp-elem .osp-extra-data,
html[data-theme="dark"] #osp-promos.osp-loc-user {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .osp-item-promos .osp-options {
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .osp-options .osp-pinfo {
  color: var(--fd-success) !important;
}

html[data-theme="dark"] .order-now-second a {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .order-now-second a:hover,
html[data-theme="dark"] p.promo-page {
  color: var(--fd-text) !important;
}


/* ------------------------------------------------------------
   8b) NASTAVITVE (user-profile.php, .stg-* / .setrow-*)

   Stran ima sloge v <style> bloku v telesu dokumenta, torej ZA
   to datoteko - zato je tu !important nujen povsod, tudi tam,
   kjer ga izvorno pravilo nima.

   Isti sklop pokriva poslovne sekcije vticnika Fable BUSINESS
   (.fbiz-* znotraj .fbiz-settings), ki se izrisejo v istih sklopih.
   Vticnikova datoteka ostaja nespremenjena.

   Od razlicice 163 je stran ENA kartica (#main): .stg-card je samo
   sklop (naslov v velikih crkah), okvir pa nosita .setlist in
   .stg-body - enako kot na strani "Sinhroniziran katalog".
   ------------------------------------------------------------ */

html[data-theme="dark"] .stg-title { color: var(--fd-text) !important; }

html[data-theme="dark"] .stg-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .stg-cardtitle,
html[data-theme="dark"] .stg-card > h3 { color: var(--fd-text-muted) !important; }

html[data-theme="dark"] .stg-cardsub,
html[data-theme="dark"] .stg-card > .stg-sub { color: var(--fd-text-dim) !important; }

/* Modra besedilna povezava (naslov sklopa ali .stg-rowactions) */
html[data-theme="dark"] .stg-wrap .stg-cardlink,
html[data-theme="dark"] .stg-wrap .stg-cardlink:hover {
  background: none !important;
  color: var(--fd-link) !important;
}
html[data-theme="dark"] .stg-wrap .stg-cardlink:focus-visible { outline-color: var(--fd-link) !important; }

html[data-theme="dark"] .stg-field > label { color: var(--fd-text) !important; }

/* Okvir sklopa: seznam vrstic in telo sklopa */
html[data-theme="dark"] .setlist,
html[data-theme="dark"] .stg-body {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

/* Specificnost mora premagati .fbiz-settings .fbiz-item-row nize spodaj */
html[data-theme="dark"] .stg-wrap .stg-body > .fbiz-item-row:last-child {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--fd-border) !important;
}

html[data-theme="dark"] .setrow {
  background: transparent !important;
  border-top-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] a.setrow:hover,
html[data-theme="dark"] details.setrow-d:hover > summary.setrow,
html[data-theme="dark"] details.setrow-d[open] > summary.setrow {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] details.setrow-d { border-top-color: var(--fd-border) !important; }

html[data-theme="dark"] .setrow-ic {
  background: transparent !important;
  color: var(--fd-text-dim) !important;
}
html[data-theme="dark"] .setrow-ic.av,
html[data-theme="dark"] .stg-wrap .setrow-ic.av .img-preview { background: var(--fd-surface-3) !important; }

/* Stikalo (.stg-sw) - vklopljeno ostane zeleno, izklopljeno je temna ploskev */
html[data-theme="dark"] .stg-wrap .stg-sw,
html[data-theme="dark"] .stg-wrap .stg-sw:hover { background: var(--fd-border-strong) !important; }
html[data-theme="dark"] .stg-wrap .stg-sw.on,
html[data-theme="dark"] .stg-wrap .stg-sw.on:hover { background: #30d158 !important; }
html[data-theme="dark"] .stg-wrap .stg-sw .stg-swk { background: #f5f5f7 !important; }
html[data-theme="dark"] .stg-wrap .stg-sw:focus-visible { outline-color: var(--fd-solid) !important; }

html[data-theme="dark"] .setrow-main strong { color: var(--fd-text) !important; }
/* Vrednost in opis sta enaka (glej user-profile.php) */
html[data-theme="dark"] .setrow-val,
html[data-theme="dark"] .setrow-val.muted,
html[data-theme="dark"] .setrow-val .muted,
html[data-theme="dark"] .setrow-sub,
html[data-theme="dark"] .setrow-pub { color: var(--fd-text-dim) !important; }

html[data-theme="dark"] .setrow-act { color: var(--fd-text-dim) !important; }
html[data-theme="dark"] a.setrow:hover .setrow-act,
html[data-theme="dark"] details.setrow-d > summary:hover .setrow-act { color: var(--fd-text) !important; }

/* Razsirjeno urejanje vrstice */
html[data-theme="dark"] .setrow-edit {
  background: var(--fd-surface) !important;
  border-top-color: var(--fd-border) !important;
}
html[data-theme="dark"] .setrow-edit > label { color: var(--fd-text) !important; }

/* Polja in gumbi na tej strani */
html[data-theme="dark"] .stg-wrap input[type="text"],
html[data-theme="dark"] .stg-wrap input[type="email"],
html[data-theme="dark"] .stg-wrap input[type="url"],
html[data-theme="dark"] .stg-wrap input[type="tel"],
html[data-theme="dark"] .stg-wrap select,
html[data-theme="dark"] .stg-wrap textarea {
  background: var(--fd-surface-3) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .stg-wrap input:focus,
html[data-theme="dark"] .stg-wrap select:focus,
html[data-theme="dark"] .stg-wrap textarea:focus {
  border-color: var(--fd-solid) !important;
  box-shadow: 0 0 0 3px rgba(223, 228, 234, .14) !important;
}

html[data-theme="dark"] .stg-wrap .btn-save,
html[data-theme="dark"] .stg-chip {
  background: var(--fd-solid) !important;
  color: var(--fd-solid-text) !important;
}
html[data-theme="dark"] .stg-wrap .btn-save:hover,
html[data-theme="dark"] .stg-chip:hover {
  background: var(--fd-solid-hover) !important;
  color: var(--fd-solid-text) !important;
}

html[data-theme="dark"] .stg-wrap .btn-cancel {
  background: var(--fd-surface-3) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .stg-wrap .btn-cancel:hover {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-text-dim) !important;
  color: var(--fd-text) !important;
}

/* Poslovne sekcije (Fable BUSINESS) v istih karticah */
html[data-theme="dark"] .fbiz-settings .fbiz-data-table td {
  border-bottom-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fbiz-settings .fbiz-data-table td:first-child { color: var(--fd-text-dim) !important; }

html[data-theme="dark"] .fbiz-settings .fbiz-item-row {
  background: var(--fd-surface) !important;
  border-color: var(--fd-border-strong) !important;
}
html[data-theme="dark"] .fbiz-settings .fbiz-item-row summary { color: var(--fd-text) !important; }

html[data-theme="dark"] .fbiz-settings .fbiz-package-card {
  background: var(--fd-surface) !important;
  border-color: var(--fd-border) !important;
}
html[data-theme="dark"] .fbiz-settings .fbiz-package-card h4,
html[data-theme="dark"] .fbiz-settings .fbiz-package-price { color: var(--fd-text) !important; }
html[data-theme="dark"] .fbiz-settings .fbiz-package-features { color: var(--fd-text-muted) !important; }

html[data-theme="dark"] .fbiz-settings .fbiz-muted,
html[data-theme="dark"] .fbiz-stg-cta-sub { color: var(--fd-text-dim) !important; }
html[data-theme="dark"] .fbiz-stg-cta-title { color: var(--fd-text) !important; }

html[data-theme="dark"] .fbiz-settings .fbiz-warning {
  background: #2e2410 !important;
  border-color: #6b551f !important;
  color: #f0d08a !important;
}

html[data-theme="dark"] .fbiz-settings .fbiz-badge-trial {
  background: #10293d !important;
  color: #7cc7f0 !important;
}

html[data-theme="dark"] .fbiz-settings .btn.btn-primary {
  background: var(--fd-solid) !important;
  color: var(--fd-solid-text) !important;
}
html[data-theme="dark"] .fbiz-settings .btn.btn-primary:hover {
  background: var(--fd-solid-hover) !important;
  color: var(--fd-solid-text) !important;
}
html[data-theme="dark"] .fbiz-settings .btn.btn-secondary {
  background: var(--fd-surface-3) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}


/* ============================================================
   9) OBRAZCI, GUMBI, TABELE, STRANJENJE
   ============================================================ */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="week"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="phone"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] #sidebar input[type="text"],
html[data-theme="dark"] #sidebar input[type="date"],
html[data-theme="dark"] #sidebar input[type="number"],
html[data-theme="dark"] #sidebar select {
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--fd-text-dim) !important;
}

html[data-theme="dark"] input[type="checkbox"] {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .form-container .ui-drop-files {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] body .ui-widget.ui-widget-content {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .btn.btn-secondary,
html[data-theme="dark"] .btn.btn-secondary:hover,
html[data-theme="dark"] a.btn.btn-secondary:hover {
  background: var(--fd-surface-2) !important;
  color: var(--fd-link) !important;
  border-color: var(--fd-border-strong) !important;
}

/* --- Primarni CTA gumbi ---
   V svetli temi so to črne pilule z belim besedilom ("Objavi oglas",
   "Kontaktiraj prodajalca/uporabnika"). Na temnem ozadju črna pilula
   izgine v podlago, zato razmerje obrnemo: svetla pilula s temnim
   besedilom. Vizualna teža in hierarhija ostaneta enaki kot v svetlem.

   Gumbi so v stranski vrstici, zato morajo selektorji vsebovati #sidebar:
   splošno pravilo "#sidebar a" (barva besedila povezav) ima zaradi ID-ja
   višjo specifičnost in bi sicer prepisalo barvo napisa. */
html[data-theme="dark"] .header-cta,
html[data-theme="dark"] .main-contact-button,
html[data-theme="dark"] .contact-button,
html[data-theme="dark"] body.user-public-profile .main-contact-button,
html[data-theme="dark"] #sidebar a.main-contact-button,
html[data-theme="dark"] #sidebar a.contact-button,
html[data-theme="dark"] .auth-btn-primary,
html[data-theme="dark"] .motp-btn-submit {
  background: var(--fd-solid) !important;
  background-color: var(--fd-solid) !important;
  color: var(--fd-solid-text) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .header-cta:hover,
html[data-theme="dark"] .main-contact-button:hover,
html[data-theme="dark"] .contact-button:hover,
html[data-theme="dark"] body.user-public-profile .main-contact-button:hover,
html[data-theme="dark"] #sidebar a.main-contact-button:hover,
html[data-theme="dark"] #sidebar a.contact-button:hover,
html[data-theme="dark"] .auth-btn-primary:hover,
html[data-theme="dark"] .motp-btn-submit:hover:not(:disabled) {
  background: var(--fd-solid-hover) !important;
  background-color: var(--fd-solid-hover) !important;
  color: var(--fd-solid-text) !important;
}

html[data-theme="dark"] body .qq-upload-button {
  background: #1c3a34 !important;
  color: #7fd6c4 !important;
}

html[data-theme="dark"] body .qq-upload-button:hover {
  background: #244a43 !important;
}

html[data-theme="dark"] ul.tabbernav {
  border-bottom-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] ul.tabbernav li a {
  color: var(--fd-text) !important;
}

/* Tabele */
html[data-theme="dark"] .flat-table {
  background: var(--fd-surface) !important;
}

html[data-theme="dark"] .flat-table thead {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .flat-table th {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .flat-table td {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .flat-table th,
html[data-theme="dark"] .flat-table td {
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .flat-table tbody tr:hover {
  background: var(--fd-surface-2) !important;
}

/* Stranjenje */
html[data-theme="dark"] .paginate a,
html[data-theme="dark"] .paginate span,
html[data-theme="dark"] .smf-paginate-compact a,
html[data-theme="dark"] .smf-paginate-compact span {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .paginate a:hover,
html[data-theme="dark"] .smf-paginate-compact a:active {
  background: var(--fd-surface-3) !important;
}

/* Opozorila / obvestila */
html[data-theme="dark"] #error_list,
html[data-theme="dark"] .error_list,
html[data-theme="dark"] #comment_error_list {
  background: #3a1f1f !important;
  color: #f0b4b4 !important;
  border-color: #6a3232 !important;
}

html[data-theme="dark"] .form-horizontal.new-comment .controls .red,
html[data-theme="dark"] .item #comments .reply-text:hover {
  color: var(--fd-danger) !important;
}

html[data-theme="dark"] .flashmessage-ok {
  background: #14261a !important;
  color: #86efac !important;
  border-color: #2b5437 !important;
}

html[data-theme="dark"] .flashmessage-error {
  background: #2c1717 !important;
  color: #fca5a5 !important;
  border-color: #6a3232 !important;
}

html[data-theme="dark"] .flashmessage-info {
  background: #15212f !important;
  color: #93c5fd !important;
  border-color: #2f4a6d !important;
}

html[data-theme="dark"] .flashmessage-warning,
html[data-theme="dark"] .help-box {
  background: #2b2312 !important;
  color: #fcd34d !important;
  border-color: #66512a !important;
}

html[data-theme="dark"] .flashmessage-error .close,
html[data-theme="dark"] .flashmessage-success .close,
html[data-theme="dark"] .flashmessage-information .close {
  color: inherit !important;
}

/* Opozorilo o iskalnem alarmu */
html[data-theme="dark"] .alert_form {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .alert-frequency > a {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .alert-frequency > a.active,
html[data-theme="dark"] .alert-frequency > a:hover {
  background: var(--fd-surface-3) !important;
}

/* Gumbi za upravljanje oglasa */
html[data-theme="dark"] .admin-options a,
html[data-theme="dark"] .admin-options .btn-edit,
html[data-theme="dark"] .admin-options .btn-pause,
html[data-theme="dark"] .admin-options .btn-activate,
html[data-theme="dark"] .admin-options .btn-remove {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .admin-options .btn-edit:hover,
html[data-theme="dark"] .admin-options .btn-pause:hover,
html[data-theme="dark"] .admin-options .btn-activate:hover,
html[data-theme="dark"] .admin-options .btn-remove:hover {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-text-dim) !important;
}

/* Namigi (multicurrency) */
html[data-theme="dark"] .MCtooltip,
html[data-theme="dark"] .MCtooltip:before {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

/* Oglasni bloki */
html[data-theme="dark"] .ads_300,
html[data-theme="dark"] .ads_728,
html[data-theme="dark"] .ads_468 {
  background: var(--fd-surface-2) !important;
}


/* ============================================================
   10) PRIJAVA / REGISTRACIJA / MAGIC OTP
   ============================================================ */

html[data-theme="dark"] body.login > section,
html[data-theme="dark"] body.register > section,
html[data-theme="dark"] body.recover > section {
  background-color: var(--fd-bg) !important;
}

/* Kartica na strani za prijavo je v svetli temi bela na beli podlagi —
   torej brez vidnega okvirja. Na temnem mora enako splavati z ozadjem;
   okvir, ki sem ga bil dodal, je ustvaril škatlo, ki je zasnova nima. */
html[data-theme="dark"] .auth-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Modalno okno za prijavo pa je pravo prekrivno okno in ploskev potrebuje. */
html[data-theme="dark"] .auth-modal-box {
  background: var(--fd-surface) !important;
  border: 1px solid var(--fd-border);
}

html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .motp-start-title {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .auth-subtitle {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .auth-card .auth-label,
html[data-theme="dark"] .auth-card label.auth-label,
html[data-theme="dark"] .auth-modal-box .auth-label,
html[data-theme="dark"] .auth-modal-box label.auth-label,
html[data-theme="dark"] .motp-label,
html[data-theme="dark"] .auth-card label.auth-label-inline,
html[data-theme="dark"] .auth-remember label.auth-label-inline,
html[data-theme="dark"] .motp-remember-text,
html[data-theme="dark"] .motp-lead strong {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .auth-card .auth-field input[type="text"],
html[data-theme="dark"] .auth-card .auth-field input[type="email"],
html[data-theme="dark"] .auth-card .auth-field input[type="password"],
html[data-theme="dark"] .auth-modal-box .auth-field input[type="text"],
html[data-theme="dark"] .auth-modal-box .auth-field input[type="email"],
html[data-theme="dark"] .auth-modal-box .auth-field input[type="password"],
html[data-theme="dark"] .motp-otp-input {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

/* Izbirnik v obrazcu za registracijo (jezik iz fable_translate) + njegova oznaka in pojasnilo */
html[data-theme="dark"] .auth-card .auth-field > label,
html[data-theme="dark"] .auth-modal-box .auth-field > label {
  color: var(--fd-text-muted) !important;
}
html[data-theme="dark"] .auth-card .auth-field select,
html[data-theme="dark"] .auth-modal-box .auth-field select {
  background-color: var(--fd-surface-2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}
html[data-theme="dark"] .auth-card .auth-field select:focus,
html[data-theme="dark"] .auth-modal-box .auth-field select:focus {
  background-color: var(--fd-surface-3) !important;
}
html[data-theme="dark"] .auth-card .auth-field .ftr-pub-tag,
html[data-theme="dark"] .auth-modal-box .auth-field .ftr-pub-tag,
html[data-theme="dark"] .auth-card .auth-field .ftr-pub-note,
html[data-theme="dark"] .auth-modal-box .auth-field .ftr-pub-note {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .auth-card .auth-field input:focus,
html[data-theme="dark"] .auth-modal-box .auth-field input:focus,
html[data-theme="dark"] .motp-otp-input:focus {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after {
  background: var(--fd-border) !important;
}

html[data-theme="dark"] .auth-btn-secondary {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .auth-btn-secondary:hover {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .auth-btn-secondary svg {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .auth-email-chip {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .auth-links a,
html[data-theme="dark"] .auth-magic-info a,
html[data-theme="dark"] .motp-resend-link {
  color: var(--fd-link) !important;
}

html[data-theme="dark"] .auth-error {
  color: var(--fd-danger) !important;
}

html[data-theme="dark"] .auth-back-btn {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .auth-back-btn:hover,
html[data-theme="dark"] .auth-modal-close:hover,
html[data-theme="dark"] #lm-step-3 #lm-otp-resend:hover:not(.motp-link-disabled) {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .auth-modal-close:hover {
  background: var(--fd-surface-2) !important;
}


/* ============================================================
   10b) MODAL "LOKACIJA IN JEZIK" (vtičnik fable_translate)

   Njegov CSS je vgrajen v izpis vtičnika v nogi, torej pride v
   dokumentu za našim <link>. Ker so ti selektorji predponi z
   html[data-theme="dark"], imajo višjo specifičnost in vseeno zmagajo —
   datoteke vtičnika ni treba spreminjati.
   ============================================================ */

html[data-theme="dark"] .ftr-lm-card {
  background: var(--fd-surface) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .ftr-lm-head {
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .ftr-lm-head h2,
html[data-theme="dark"] .ftr-lm-label,
html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-close,
html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-close:hover {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-btn,
html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-list {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-btn:hover {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-text-dim) !important;
}

/* Puščica navzdol je narisana z border-om */
html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-btn:after {
  border-color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-list li {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-list li:hover,
html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-list li.active {
  background: var(--fd-surface-3) !important;
}

/* Ikono globusa vtičnik sestavi v JS s trdo zapisanim stroke="#111";
   predstavitveni atribut CSS premaga. */
html[data-theme="dark"] .ftr-lm-globe {
  stroke: var(--fd-text-muted) !important;
}

/* Gumb "Shrani nastavitve" je črn — obrnemo ga enako kot ostale CTA */
html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-save {
  background: var(--fd-solid) !important;
  color: var(--fd-solid-text) !important;
}

html[data-theme="dark"] .ftr-lm-backdrop .ftr-lm-save:hover {
  background: var(--fd-solid-hover) !important;
  color: var(--fd-solid-text) !important;
}


/* ============================================================
   11) FAQ + statične strani
   ============================================================ */

html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .faq-support,
html[data-theme="dark"] .faq-field input,
html[data-theme="dark"] .faq-field textarea {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
}

html[data-theme="dark"] .faq-page-wrap h1,
html[data-theme="dark"] .faq-category-title,
html[data-theme="dark"] .faq-q,
html[data-theme="dark"] .faq-field label,
html[data-theme="dark"] .faq-field input,
html[data-theme="dark"] .faq-field textarea {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] .faq-q:hover {
  color: var(--fd-link) !important;
}

html[data-theme="dark"] .faq-a,
html[data-theme="dark"] .faq-sub,
html[data-theme="dark"] .faq-support-intro {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .faq-category-title {
  border-bottom-color: var(--fd-border) !important;
}

html[data-theme="dark"] .faq-item[open] {
  border-color: var(--fd-border-strong) !important;
}


/* ============================================================
   12) responsive.css + ajax-uploader.css
   (v izvirniku znotraj media queryjev; tu jih prepišemo brez omejitve
   širine — vrednosti so barvne, zato je razširitev neškodljiva)
   ============================================================ */

html[data-theme="dark"] header .nav {
  background: var(--fd-surface) !important;
}

html[data-theme="dark"] header .nav a,
html[data-theme="dark"] header .nav a.active,
html[data-theme="dark"] header .nav a:hover,
html[data-theme="dark"] header .nav a.publish,
html[data-theme="dark"] header .nav a.publish:hover,
html[data-theme="dark"] body.user #sidebar a {
  color: var(--fd-text) !important;
}

html[data-theme="dark"] header .nav a:hover,
html[data-theme="dark"] header .nav a.active,
html[data-theme="dark"] header .nav a.publish,
html[data-theme="dark"] header .nav a.publish:hover {
  background: var(--fd-surface-2) !important;
}

/* Mobilni sloj s filtri čez celo stran.
   Media query je nujen: v responsive.css je .fixed-layout definiran samo do
   767px, na iskanju pa ima #sidebar ta razred tudi na namizju. Brez omejitve
   je stranski stolpec dobil polno podlago BREZ zaokroženih robov, ki je
   gledala izpod zaokrožene .filters — od tod oglat rob v zgornjem kotu. */
@media screen and (max-width: 767px) {
  html[data-theme="dark"] .fixed-layout {
    background: var(--fd-surface) !important;
  }
}

html[data-theme="dark"] #item-content .price {
  background: #2f2a17 !important;
  color: var(--fd-text) !important;
}

/* Nalagalnik fotografij pri objavi oglasa */
html[data-theme="dark"] .photos_div div,
html[data-theme="dark"] .ajax_preview_img,
html[data-theme="dark"] .qq-upload-list li.qq-placeholder {
  background: var(--fd-surface-2) !important;
}

html[data-theme="dark"] .qq-upload-list li {
  background: #17301a !important;
  color: #cfe8d2 !important;
}

html[data-theme="dark"] .qq-upload-fail .qq-upload-status-text {
  background: #3a1f1f !important;
  color: #f0b4b4 !important;
  border-color: #6a3232 !important;
}


/* ============================================================
   13) DROBNARIJE
   ============================================================ */

html[data-theme="dark"] .fable-country {
  color: var(--fd-text-muted) !important;
}

/* Zastavice in naložene profilne slike ostanejo na svetli podlagi
   (so večbarvne in imajo lahko prosojnost) */
html[data-theme="dark"] .fable-country img.fable-flag,
html[data-theme="dark"] #sidebar #contact p.user-img img {
  background: #f2f2f2 !important;
}

/* Avatarja z inicialkami tu NE prebarvamo: temen krog z belimi črkami
   (glej style-child.css) deluje na svetli in na temni kartici enako, tako
   kot na referenci. Ena sama različica pomeni tudi eno mesto za nastavitev. */

/* Senčenje kartic je na temnem ozadju nevidno — malce ga okrepimo */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-modal-box,
html[data-theme="dark"] #sidebar .smf-combo-dropdown {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Slike naj na temnem ne "žarijo" (samo dekorativne, ne fotografije oglasov) */
html[data-theme="dark"] .smf-load-more-btn.smf-loading::after {
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-top-color: #fff !important;
}

/* Home search — pametni predlogi */
html[data-theme="dark"] .search-suggest {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .search-suggest a.ss-item { color: var(--fd-text) !important; }
html[data-theme="dark"] .search-suggest a.ss-item:hover,
html[data-theme="dark"] .search-suggest a.ss-item.ss-active { background: var(--fd-surface-3) !important; }
html[data-theme="dark"] .ss-parent { color: var(--fd-text-dim) !important; }
html[data-theme="dark"] .ss-tag { background: var(--fd-surface-3) !important; color: var(--fd-text-muted) !important; }
html[data-theme="dark"] .ss-item.ss-cat .ss-tag { background: #103a4c !important; color: var(--fd-link) !important; }
html[data-theme="dark"] .ss-item.ss-val .ss-tag { background: #2f2a44 !important; color: #b7a4f0 !important; }

/* Pametno iskanje — okno iz glave strani (fable_search_popup) */
html[data-theme="dark"] .fsp-box {
  background: var(--fd-surface) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .fsp-head { border-bottom-color: var(--fd-border) !important; }

html[data-theme="dark"] .fsp-box input[type="text"].fsp-input {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fsp-box input[type="text"].fsp-input::placeholder { color: var(--fd-text-dim) !important; }
html[data-theme="dark"] .fsp-box input[type="text"].fsp-input:focus {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .fsp-clear {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text-muted) !important;
}
html[data-theme="dark"] .fsp-clear:hover { background: var(--fd-border-strong) !important; }
html[data-theme="dark"] .fsp-close { color: var(--fd-text-muted) !important; }
html[data-theme="dark"] .fsp-close:hover {
  background-color: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
}

/* Seznam predlogov teče v vsebini okna, zato brez lastne ploskve */
html[data-theme="dark"] .search-suggest.fsp-suggest {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .fsp-empty .fsp-empty-title { color: var(--fd-text) !important; }
html[data-theme="dark"] .fsp-empty span { color: var(--fd-text-dim) !important; }

html[data-theme="dark"] .fsp-section-head h3 { color: var(--fd-text-dim) !important; }
html[data-theme="dark"] .fsp-section-head a { color: var(--fd-link) !important; }

html[data-theme="dark"] .fsp-cat {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fsp-cat:hover {
  background-color: var(--fd-surface-3) !important;
  border-color: var(--fd-border-strong) !important;
}
html[data-theme="dark"] .fsp-cat-count { color: var(--fd-text-dim) !important; }
html[data-theme="dark"] .fsp-cat .fsp-cat-ico { background: var(--fd-surface-3) !important; }

html[data-theme="dark"] .fsp-brand {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fsp-brand:hover {
  background-color: var(--fd-surface-3) !important;
  border-color: var(--fd-border-strong) !important;
}

html[data-theme="dark"] .ss-item.ss-item-all .ss-label { color: var(--fd-link) !important; }

/* Gumb "Pokaži več (N)" med aktivnimi filtri */
html[data-theme="dark"] #smf-bubbles .smf-bubbles-toggle {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text-muted) !important;
}
html[data-theme="dark"] #smf-bubbles .smf-bubbles-toggle:hover {
  background: var(--fd-surface-3) !important;
  color: var(--fd-text) !important;
}


/* ============================================================
   "MOJI OGLASI" (user/items): glava, filtri, prazna stanja
   Iskalno polje in spustni meniji podlago dobijo iz splošnega
   pravila za input/select v sklopu 9; tukaj so samo gradniki,
   ki jih to pravilo ne pokrije.
   ============================================================ */

html[data-theme="dark"] .ui-head {
  border-bottom-color: var(--fd-border);
}

html[data-theme="dark"] .ui-stats-btn {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .ui-stats-btn:hover {
  border-color: var(--fd-text-muted);
  color: var(--fd-text);
}
html[data-theme="dark"] .ui-stats-btn[aria-expanded="true"] {
  background: var(--fd-solid);
  border-color: var(--fd-solid);
  color: var(--fd-solid-text);
}

html[data-theme="dark"] .ui-stats-panel {
  border-color: var(--fd-border);
}
html[data-theme="dark"] .ui-stats-loading,
html[data-theme="dark"] .ui-stats-error {
  color: var(--fd-text-muted);
}

html[data-theme="dark"] .ui-search svg { color: var(--fd-text-dim); }
html[data-theme="dark"] .ui-search:focus-within svg { color: var(--fd-text); }
html[data-theme="dark"] .ui-search input[type="text"]:focus {
  border-color: var(--fd-text-muted) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}

/* Splošno pravilo za select uporablja bližnjico "background", ki pobriše
   puščico; ker ima polje appearance:none, bi brez tega ostalo brez znaka,
   da je spustni meni. Zato jo tukaj vrnemo v svetli barvi. */
html[data-theme="dark"] .ui-field select {
  background: var(--fd-surface-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6adb6' stroke-width='3'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 16px center !important;
}

html[data-theme="dark"] .ui-active-count { color: var(--fd-text-muted); }
html[data-theme="dark"] .ui-chip {
  background: var(--fd-surface-3);
  color: var(--fd-text);
}
html[data-theme="dark"] .ui-chip:hover {
  background: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .ui-chip svg { color: var(--fd-text-dim); }
html[data-theme="dark"] .ui-chip:hover svg { color: var(--fd-text); }
html[data-theme="dark"] .ui-clear { color: var(--fd-text-muted); }
html[data-theme="dark"] .ui-clear:hover { color: var(--fd-text); }

/* Prazna stanja po standardu Shranjenih oglasov (.ffav-empty) */
html[data-theme="dark"] .ui-empty svg { color: var(--fd-text-dim); }
html[data-theme="dark"] .ui-empty p { color: var(--fd-text-muted); }
html[data-theme="dark"] .ui-empty-btn {
  background: var(--fd-surface-3);
  color: var(--fd-text);
}
html[data-theme="dark"] .ui-empty-btn:hover {
  background: var(--fd-border-strong);
  color: var(--fd-text);
}

/* "Čaka na objavo" pod lastnimi oglasi: kartice so del seznama lastnih oglasov,
   zato temni način zanje ne potrebuje ničesar svojega (ločnice ni več). */

html[data-theme="dark"] .ui-field label { color: var(--fd-text-muted); }


/* ============================================================
   FABLE PUBLISH — obrazec za objavo/urejanje oglasa (.fp-publish)
   ============================================================ */
html[data-theme="dark"] body.item.item-post #main {
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .fp-publish .fp-section {
  background: var(--fd-surface);
  border-color: var(--fd-border);
}
html[data-theme="dark"] .fp-publish .fp-head h1,
html[data-theme="dark"] .item.item-post .fp-publish .fp-section > h2,
html[data-theme="dark"] .item.item-post .fp-publish label.control-label,
html[data-theme="dark"] .fp-publish .meta > label {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-lead,
html[data-theme="dark"] .fp-publish .fp-help,
html[data-theme="dark"] .fp-publish .fp-count,
html[data-theme="dark"] .fp-publish .floc-hint,
html[data-theme="dark"] .fp-publish .fp-price p.price-curr {
  color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .fp-count.is-over { color: var(--fd-danger); }
html[data-theme="dark"] .fp-publish input[type="text"],
html[data-theme="dark"] .fp-publish input[type="url"],
html[data-theme="dark"] .fp-publish input[type="tel"],
html[data-theme="dark"] .fp-publish input[type="email"],
html[data-theme="dark"] .fp-publish input[type="number"],
html[data-theme="dark"] .fp-publish select,
html[data-theme="dark"] .fp-publish textarea,
html[data-theme="dark"] .fp-publish .meta select,
html[data-theme="dark"] .fp-publish .meta input[type="text"] {
  background-color: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fp-publish select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a6adb6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] .fp-publish input:focus,
html[data-theme="dark"] .fp-publish select:focus,
html[data-theme="dark"] .fp-publish textarea:focus {
  border-color: #3fb397 !important;
  box-shadow: 0 0 0 3px rgba(63, 179, 151, .35) !important;
}
html[data-theme="dark"] .fp-publish .qq-upload-button {
  background: #1c2f2a !important;
  border-color: #3fb397 !important;
  color: #7fd6bf !important;
}
html[data-theme="dark"] .fp-publish .qq-upload-button:hover {
  background: #223933 !important;
}
html[data-theme="dark"] .fp-publish .qq-upload-button::before {
  background-color: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .qq-upload-list li {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border);
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fp-publish .qq-upload-list li.qq-upload-success:first-child {
  border-color: #3fb397;
  box-shadow: inset 0 0 0 1px #3fb397;
}
html[data-theme="dark"] .fp-publish .qq-upload-list li.qq-placeholder {
  background: #1c2f2a !important;
  border-color: #3fb397;
}
html[data-theme="dark"] .fp-publish .qq-upload-list li.qq-placeholder:before {
  color: #7fd6bf;
}
html[data-theme="dark"] .fp-publish .fp-seg button,
html[data-theme="dark"] .fp-publish .meta[data-type="RADIO"] ul li label {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-seg button:hover,
html[data-theme="dark"] .fp-publish .meta[data-type="RADIO"] ul li label:hover {
  border-color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .fp-seg button[aria-checked="true"],
html[data-theme="dark"] .fp-publish .meta[data-type="RADIO"] ul li input[type="radio"]:checked + label {
  background: #1c2f2a;
  border-color: #3fb397;
  color: #7fd6bf;
}
html[data-theme="dark"] .fp-publish .read-only-fields {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text-muted) !important;
}
html[data-theme="dark"] .item-post .fp-publish .fp-switch .controls.checkbox {
  border-top-color: var(--fd-border);
}
html[data-theme="dark"] .item.item-post .fp-publish .fp-switch .controls.checkbox label,
html[data-theme="dark"] .item.item-post .fp-publish #gdpr-check label {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-switch .controls.checkbox input[type="checkbox"] {
  background: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .fp-switch .controls.checkbox input[type="checkbox"]:checked {
  background: #30d158;
}
html[data-theme="dark"] .fp-publish .pblbt .btn.btn-primary.pbl {
  background: var(--fd-solid) !important;
  color: var(--fd-solid-text) !important;
}
html[data-theme="dark"] .fp-publish .pblbt .btn.btn-primary.pbl:hover {
  background: var(--fd-solid-hover) !important;
}
@media screen and (max-width: 767px) {
  html[data-theme="dark"] .fp-publish .fp-actions {
    background: var(--fd-surface);
    border-top-color: var(--fd-border);
  }
}
html[data-theme="dark"] .fp-publish .fp-switch-sub {
  color: var(--fd-text-muted);
}

/* FABLE PUBLISH — fotografije v enem koraku (js/item-post-photos.js, v191) */
html[data-theme="dark"] .fp-publish .fp-direct.is-drag .qq-upload-button {
  background: #25423a !important;
  border-color: #7fd6bf !important;
}
html[data-theme="dark"] .fp-publish .fp-full .qq-upload-button,
html[data-theme="dark"] .fp-publish .fp-full .qq-upload-button:hover {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text-muted) !important;
}
html[data-theme="dark"] .fp-publish .fp-up-note {
  color: var(--fd-danger);
}
html[data-theme="dark"] .fp-publish .qq-upload-list li .fp-up-bar {
  background: rgba(255, 255, 255, .25);
}
html[data-theme="dark"] .fp-publish .qq-upload-list li .fp-up-bar i {
  background: #3fb397;
}
html[data-theme="dark"] .fp-publish .qq-upload-list li.fp-up-err {
  border-color: var(--fd-danger);
}

/* FABLE — "Izpostavljeno do …" (fable_pay .opr-promote-btn-extend, v193):
   isti napis kot "Izpostavi oglas"; generirano pravilo vticnika mu sicer da sivo
   besedilo in temno ozadje obrobljene razlicice. */
html[data-theme="dark"] .admin-options .opr-promote-btn.opr-promote-btn-extend {
  color: #e2e2e2 !important;
}
html[data-theme="dark"] .item-meta-hook > .opr-promote-wrap > .opr-promote-btn-extend {
  color: #fff !important;
}
html[data-theme="dark"] .admin-options .opr-promote-btn[data-tip]::after,
html[data-theme="dark"] .item-meta-hook > .opr-promote-wrap > .opr-promote-btn[data-tip]::after {
  background: #f2f2f4;
  color: #111;
}

/* FABLE PUBLISH — končna kategorija (v200) */
html[data-theme="dark"] .fp-publish .categ .fp-cat-error {
  color: var(--fd-danger);
}
html[data-theme="dark"] .fp-publish .categ select.fp-cat-missing,
html[data-theme="dark"] .fp-publish .categ select.fp-cat-missing:focus {
  border-color: var(--fd-danger) !important;
}
html[data-theme="dark"] .fp-publish .categ select.fp-cat-missing:focus {
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .3) !important;
}

/* FABLE PUBLISH — čarovnik po korakih + predogled (v217) */
html[data-theme="dark"] .fp-publish .fp-step-title,
html[data-theme="dark"] .item.item-post .fp-publish h3.fp-pv-title,
html[data-theme="dark"] .fp-publish .fp-pv-price {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-progress-label,
html[data-theme="dark"] .fp-publish .fp-pv-cat,
html[data-theme="dark"] .fp-publish .fp-pv-specs .eden-light,
html[data-theme="dark"] .fp-publish .fp-pv-empty-title,
html[data-theme="dark"] .fp-publish .fp-pv-desc {
  color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .fp-pv-empty-text,
html[data-theme="dark"] .fp-publish .fp-pv-bike,
html[data-theme="dark"] .fp-publish .fp-pv-specs .eden-strong strong.is-empty {
  color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .fp-step-num {
  background: var(--fd-solid);
  color: var(--fd-solid-text);
}
html[data-theme="dark"] .fp-publish .fp-step.is-done .fp-step-num {
  background: #2f9e6e;
  color: #fff;
}
html[data-theme="dark"] .fp-publish .fp-step-state {
  background: rgba(251, 146, 60, .16);
  color: #fdba74;
}
html[data-theme="dark"] .fp-publish .fp-step.is-done .fp-step-state {
  background: rgba(74, 222, 128, .14);
  color: var(--fd-success);
}
html[data-theme="dark"] .fp-publish .fp-step-missing {
  color: var(--fd-danger);
}
html[data-theme="dark"] .fp-publish input.fp-input-missing,
html[data-theme="dark"] .fp-publish textarea.fp-input-missing,
html[data-theme="dark"] .fp-publish .meta.fp-meta-missing select,
html[data-theme="dark"] .fp-publish .meta.fp-meta-missing input[type="text"],
html[data-theme="dark"] .fp-publish .meta.fp-meta-missing textarea,
html[data-theme="dark"] .fp-publish .meta.fp-meta-missing .fp-seg button {
  border-color: var(--fd-danger) !important;
}
html[data-theme="dark"] .fp-publish .fp-progress-seg,
html[data-theme="dark"] .fp-publish .fp-progress-seg:disabled:hover {
  background: var(--fd-surface-3);
}
html[data-theme="dark"] .fp-publish .fp-progress-seg:hover {
  background: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .fp-progress-seg.is-done {
  background: #2f9e6e;
}
html[data-theme="dark"] .fp-publish .fp-progress-seg.is-current {
  background: var(--fd-solid);
}
html[data-theme="dark"] .fp-publish .fp-nav-back,
html[data-theme="dark"] .fp-publish.fp-wiz-edit .fp-nav-next {
  background: transparent;
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-nav-back:hover,
html[data-theme="dark"] .fp-publish.fp-wiz-edit .fp-nav-next:hover {
  background: transparent;
  border-color: var(--fd-text-muted);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-nav-next {
  background: var(--fd-solid);
  color: var(--fd-solid-text);
}
html[data-theme="dark"] .fp-publish .fp-nav-next:hover {
  background: var(--fd-solid-hover);
  color: var(--fd-solid-text);
}
html[data-theme="dark"] .fp-publish .fp-preview {
  background: var(--fd-bg);
  box-shadow: inset 0 0 0 1px var(--fd-border);
}
html[data-theme="dark"] .fp-publish .fp-pv-card {
  background: var(--fd-surface);
  border-color: var(--fd-border);
  box-shadow: none;
}
html[data-theme="dark"] .fp-publish .fp-pv-media {
  background: var(--fd-surface-2);
}
html[data-theme="dark"] .fp-publish .fp-pv-ph {
  background: var(--fd-surface-3);
}
/* napisi polj po meri: svetlo pravilo (.item.item-post …) je bilo močnejše;
   puščica izbirnika: splošno temno pravilo z bližnjico background ponastavi
   background-repeat, zato se je puščica ponavljala po vsej širini */
html[data-theme="dark"] .item.item-post .fp-publish .meta > label {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish select {
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
/* predogled na mobilnem (v219) */
html[data-theme="dark"] .fp-publish .fp-pv-open,
html[data-theme="dark"] .fp-publish .fp-pv-open:hover {
  background: transparent;
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish.fp-pv-open .fp-preview {
  background: rgba(0, 0, 0, .7);
  box-shadow: none;
}
html[data-theme="dark"] .fp-publish.fp-pv-open .fp-pv-close {
  background: var(--fd-surface-2);
  color: var(--fd-text);
}
/* celozaslonska stran (v221) */
html[data-theme="dark"] body.item-post {
  background: var(--fd-bg) !important;
}
html[data-theme="dark"] .fp-publish .fp-flow,
html[data-theme="dark"] .fp-publish.fp-wizard .fp-layout .fp-actions {
  background: var(--fd-surface);
}
html[data-theme="dark"] .fp-publish.fp-wizard .fp-layout .fp-actions,
html[data-theme="dark"] .fp-publish.fp-classic .fp-layout .fp-actions {
  border-top-color: var(--fd-border);
}
html[data-theme="dark"] .fp-publish .fp-layout .fp-step {
  background: transparent;
}
html[data-theme="dark"] .fp-publish .fp-layout .fp-preview {
  background: var(--fd-bg);
  box-shadow: none;
}
html[data-theme="dark"] .fp-publish .fp-brand-logo .logo-svg,
html[data-theme="dark"] .fp-publish .fp-brand-logo img {
  filter: invert(1) brightness(0.88);
}
html[data-theme="dark"] .fp-publish .fp-exit {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-exit:hover {
  background: var(--fd-surface-2);
  color: var(--fd-text);
}
/* tanka črta + "Kaj prodajate?" (v223) */
html[data-theme="dark"] .fp-publish .fp-topline > span {
  background: #2f9e6e;
}
html[data-theme="dark"] .fp-publish .fp-kind,
html[data-theme="dark"] .fp-publish .fp-kind:hover {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-kind.is-selected {
  border-color: var(--fd-solid);
  box-shadow: inset 0 0 0 1px var(--fd-solid);
}
html[data-theme="dark"] .fp-publish .fp-kind-radio {
  border-color: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .fp-kind.is-selected .fp-kind-radio {
  border-color: var(--fd-solid);
}
html[data-theme="dark"] .fp-publish .fp-kind-icon {
  color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .fp-kind:hover .fp-kind-icon,
html[data-theme="dark"] .fp-publish .fp-kind.is-selected .fp-kind-icon {
  color: var(--fd-text);
}
/* podkategorije v koraku "Kaj prodajate?" (v225; kartice dedujejo .fp-kind) */
html[data-theme="dark"] .fp-publish .fp-kind-up {
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-kind-up:hover {
  border-color: var(--fd-text-muted);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-kind-crumb {
  color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish button.fp-kind-crumb:hover,
html[data-theme="dark"] .fp-publish .fp-kind-crumb.is-current {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-kind-sep {
  color: var(--fd-text-dim);
}
/* predogled brez fotografije (v227) */
html[data-theme="dark"] .fp-publish .fp-pv-cat-icon {
  color: var(--fd-text-dim);
}
/* izbirnik z vpisovanjem (v230) */
html[data-theme="dark"] .fp-publish .fp-combo-trigger {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .fp-combo-trigger:hover {
  border-color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .fp-combo.is-open .fp-combo-trigger,
html[data-theme="dark"] .fp-publish .fp-combo-dropdown {
  border-color: var(--fd-text-muted);
  box-shadow: 0 0 0 1px var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .meta .fp-combo input.fp-combo-search {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fp-publish .fp-combo-arrow {
  color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .fp-combo-dropdown {
  background: var(--fd-surface);
}
html[data-theme="dark"] .fp-publish .fp-combo-option {
  color: var(--fd-text);
  border-bottom-color: var(--fd-border);
}
html[data-theme="dark"] .fp-publish .fp-combo-option:hover,
html[data-theme="dark"] .fp-publish .fp-combo-option.is-active {
  background: var(--fd-surface-2);
}
html[data-theme="dark"] .fp-publish .fp-combo-option.is-selected {
  background: var(--fd-surface-3);
}
html[data-theme="dark"] .fp-publish .fp-combo-none {
  color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .meta.fp-meta-missing .fp-combo-trigger {
  border-color: var(--fd-danger);
}
/* gumbi izbire kot kartice (v232) */
html[data-theme="dark"] .fp-publish .meta.fp-has-seg .fp-seg button {
  box-shadow: none;
}
html[data-theme="dark"] .fp-publish .meta.fp-has-seg .fp-seg button {
  border-color: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .meta.fp-has-seg .fp-seg button:hover {
  border-color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .meta.fp-has-seg .fp-seg button[aria-checked="true"] {
  border-color: #3fb397;
  box-shadow: 0 0 0 1px #3fb397;
}
html[data-theme="dark"] .fp-publish .meta.fp-has-seg.fp-meta-missing .fp-seg button {
  border-color: var(--fd-danger);
}
/* naslov s korakom + tanka črta (v233) */
html[data-theme="dark"] .fp-publish .fp-h1-step {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-h1-sep {
  color: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .fp-progress-line {
  background: var(--fd-surface-3);
}
html[data-theme="dark"] .fp-publish .fp-progress-line > span {
  background: #2f9e6e;
}
/* izbrana vrednost v izbirniku (v238) */
html[data-theme="dark"] .fp-publish .fp-combo.has-value .fp-combo-trigger {
  background: #1c2f2a;
  border-color: #2f6f5d;
}
html[data-theme="dark"] .fp-publish .fp-combo.has-value.is-open .fp-combo-trigger {
  background: var(--fd-surface-2);
  border-color: var(--fd-text-muted);
}
/* strnjena glava (v239) */
html[data-theme="dark"] .fp-publish .fp-layout .fp-brand .fp-head {
  border-left-color: var(--fd-border);
}
/* stikala kot polja (v240) */
html[data-theme="dark"] .fp-publish .fp-switch {
  background: var(--fd-surface-2);
}
html[data-theme="dark"] .fp-publish .fp-switch:has(input[type="checkbox"]:checked) {
  background: #1c2f2a;
  border-color: #2f6f5d;
}
html[data-theme="dark"] .fp-publish .fp-switch .controls.checkbox input[type="checkbox"] {
  background: var(--fd-border-strong);
}
html[data-theme="dark"] .fp-publish .fp-switch .controls.checkbox input[type="checkbox"]:checked {
  background: #30d158;
}
/* iskanje kategorije (v241) */
html[data-theme="dark"] .fp-publish .fp-ksearch input.fp-ksearch-input {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fp-publish .fp-ksearch input.fp-ksearch-input:focus {
  border-color: var(--fd-text-muted) !important;
  box-shadow: 0 0 0 1px var(--fd-text-muted) !important;
}
html[data-theme="dark"] .fp-publish .fp-ksearch-list {
  background: var(--fd-surface);
  border-color: var(--fd-border);
}
html[data-theme="dark"] .fp-publish .fp-ksearch-opt {
  border-bottom-color: var(--fd-border);
}
html[data-theme="dark"] .fp-publish .fp-ksearch-opt:hover,
html[data-theme="dark"] .fp-publish .fp-ksearch-opt.is-active {
  background: var(--fd-surface-2);
}
html[data-theme="dark"] .fp-publish .fp-ksearch-name {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-ksearch-path,
html[data-theme="dark"] .fp-publish .fp-ksearch-icon {
  color: var(--fd-text-muted);
}
/* privzeto iskanje kategorije (v243) */
html[data-theme="dark"] .fp-publish .fp-ksearch-browse {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-ksearch-browse:hover {
  color: #7fd6bf;
}
html[data-theme="dark"] .fp-publish .fp-ksearch-note {
  color: var(--fd-text-muted);
}
/* kolo v prvem koraku (v267/269) */
html[data-theme="dark"] .fp-publish .fp-bk-group,
html[data-theme="dark"] .fp-publish .fp-bk-note,
html[data-theme="dark"] .fp-publish .fp-bk-empty,
html[data-theme="dark"] .fp-publish .fp-bk-crumb-k,
html[data-theme="dark"] .fp-publish .fp-title-autonote {
  color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .fp-bk-q,
html[data-theme="dark"] .fp-publish .fp-title-autoval {
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-bk-crumb,
html[data-theme="dark"] .fp-publish .fp-bk-crumb:hover {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-bk-crumb:hover {
  border-color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .fp-bk-combo input.fp-combo-search {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fp-publish .fp-bk-sub {
  color: var(--fd-text-muted);
}
html[data-theme="dark"] .fp-publish .fp-bk-list .fp-bk-opt-other {
  border-top-color: var(--fd-border-strong);
  color: #7fd6bf;
}
html[data-theme="dark"] .fp-publish .fp-bk-list .fp-bk-opt-family::after {
  color: var(--fd-text-dim);
}
html[data-theme="dark"] .fp-publish .fp-bk-text input.fp-bk-input {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}
html[data-theme="dark"] .fp-publish .fp-bk-text input.fp-bk-input:focus {
  border-color: var(--fd-text-muted) !important;
  box-shadow: 0 0 0 1px var(--fd-text-muted) !important;
}
html[data-theme="dark"] .fp-publish .fp-bk-go {
  background: var(--fd-solid);
  color: var(--fd-solid-text);
}
html[data-theme="dark"] .fp-publish .fp-bk-go:hover {
  background: var(--fd-solid-hover);
}
html[data-theme="dark"] .fp-publish .fp-bk-pill,
html[data-theme="dark"] .fp-publish .fp-bk-pill:hover {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
  color: var(--fd-text);
}
html[data-theme="dark"] .fp-publish .fp-bk-pill.is-selected {
  border-color: var(--fd-solid);
  box-shadow: inset 0 0 0 1px var(--fd-solid);
}
html[data-theme="dark"] .fp-publish .fp-title-autobox {
  background: var(--fd-surface-2);
  border-color: var(--fd-border-strong);
}

/* Prijava spornega oglasa (v277): razlog kot ostala polja, pojasnilo pod poljem */
html[data-theme="dark"] .auth-field-hint {
  color: var(--fd-text-muted) !important;
}
html[data-theme="dark"] #report-modal .auth-field textarea {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border-strong) !important;
}
html[data-theme="dark"] #report-modal .auth-field textarea:focus {
  background: var(--fd-surface-3) !important;
  border-color: var(--fd-text-muted) !important;
  box-shadow: none !important;
}

/* Stran 404 (v289): siv okvir glave in pilule podobnih iskanj */
html[data-theme="dark"] .fable-404-page {
  background: var(--fd-surface-2);
}
html[data-theme="dark"] .fable-404-searches a {
  background: var(--fd-surface-3);
  color: var(--fd-text);
  border-color: var(--fd-border-strong);
}
html[data-theme="dark"] .fable-404-searches a:hover {
  border-color: var(--fd-text-muted);
}

/* Opozorilo ob nerealno nizki ceni (v436) */
html[data-theme="dark"] .fp-publish .fp-price-low {
  background: rgba(217, 154, 0, .12);
  color: #f3cf7a;
  border-color: rgba(217, 154, 0, .45);
}

/* Opozorilo na kartici (v437) */
html[data-theme="dark"] .auth-card .auth-warning {
  background: rgba(217, 154, 0, .12);
  color: #f3cf7a;
  border-color: rgba(217, 154, 0, .45);
}

/* Rebrand thatbike (1. 11. 2026): iskanje v glavi samo z ikono na vseh straneh, kot na domači strani V1 (css/home-v1.css):
   okrogel gumb kot ostale ikone v glavi, ime za bralnike zaslona ostane v atributu title. */
body:not(.is-app) .header-right .header-icon.fsp-open {
  width: 40px !important;
  padding: 0 !important;
  justify-content: center;
  border-radius: 50% !important;
}

body:not(.is-app) .header-right .header-icon.fsp-open .header-icon-label {
  display: none;
}

/* Rebrand thatbike (1. 11. 2026): oznaka Premium na vseh straneh kot na domači strani V1 (prej samo body.home-v1 v
   css/home-v1.css; Luka: »poenoti homepage z ostalimi stranmi«). Namesto rumenega diamanta (#f9be01, style-child.css
   .top-oglas.premium-badge) en trikotnik simbola thatbike, »arrow device« iz CGP str. 9, v Volt Lime #D4FF3A (Luka 31. 10.).
   Oblika je sprednji trikotnik iz thatbike-logo-cgp-primary.svg (enaki kateti, zaobljeni robovi). Pilula je temna
   (Ink 58 %), zato Volt Lime in ne Deep Lime (CGP str. 13). Diamant ostane v oznaki (PHP), tu je skrit. Na glavni sliki
   strani oglasa je pilula večja (24 px), zato tudi trikotnik. */
.top-oglas.premium-badge svg {
  display: none;
}

.top-oglas.premium-badge::before {
  content: "";
  flex: 0 0 auto;
  height: 10px;
  aspect-ratio: 55.76 / 52;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55.76 52'%3E%3Cpath d='M51.76 4 L4 48 L4 4 Z' fill='%23D4FF3A' stroke='%23D4FF3A' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.thumb-badges.item-premium-badge .top-oglas.premium-badge::before {
  height: 12px;
}

/* =====================================================
   Prijava v dveh korakih kot ChatGPT (v484, header.php + user-login.php):
   e-pošta z gumbom Uredi v polju, oko v polju za geslo, "Ste pozabili
   geslo?" pod njim in ločilnik ALI pred enkratno kodo. Svetla pravila so
   tukaj, ker style-child.min.css nima generatorja.
   ===================================================== */
.auth-input-wrap {
  position: relative;
}

.auth-card .auth-field .auth-input-wrap input,
.auth-modal-box .auth-field .auth-input-wrap input {
  padding-right: 52px !important;
}

.auth-card .auth-field .auth-input-wrap input[type="email"],
.auth-modal-box .auth-field .auth-input-wrap input[type="email"] {
  padding-right: 104px !important;
}

/* Zaklenjen naslov (korak z geslom) ni polje za tipkanje */
.auth-card .auth-field .auth-input-wrap input[readonly],
.auth-modal-box .auth-field .auth-input-wrap input[readonly] {
  cursor: default;
}

.auth-card .auth-field .auth-input-wrap input[readonly]:focus,
.auth-modal-box .auth-field .auth-input-wrap input[readonly]:focus {
  border-color: #d8d8d8 !important;
  background: #fafafa !important;
  box-shadow: none !important;
}

.auth-input-action {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px !important;
  min-width: 36px;
  margin: 0 !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #1a73e8 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.auth-input-action:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.auth-input-action:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 1px;
}

.auth-pass-toggle {
  width: 40px;
  padding: 0 !important;
  color: #666 !important;
}

.auth-pass-toggle .auth-eye-off,
.auth-pass-toggle.is-shown .auth-eye-on {
  display: none;
}

.auth-pass-toggle.is-shown .auth-eye-off {
  display: block;
}

/* Ena vrstica pod geslom: "Želim ostati prijavljen" levo, "Pozabljeno geslo?" desno */
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  clear: both;
  margin: 0 0 20px;
}

.auth-row .auth-remember {
  width: auto !important;
  margin: 0 !important;
  align-items: center !important;
}

.auth-row .auth-remember label.auth-label-inline {
  line-height: 18px !important;
  white-space: nowrap !important;
}

.auth-forgot {
  clear: both;
  margin: -4px 0 18px;
}

.auth-row .auth-forgot {
  margin: 0 0 0 auto;
}

.auth-forgot a {
  color: #1a73e8 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.auth-forgot a:hover {
  text-decoration: underline !important;
}

.auth-divider--or span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

button.auth-btn-secondary {
  font-family: inherit;
}

html[data-theme="dark"] .auth-input-action,
html[data-theme="dark"] .auth-forgot a {
  color: var(--fd-link) !important;
}

html[data-theme="dark"] .auth-input-action:hover {
  background: var(--fd-surface-3) !important;
}

html[data-theme="dark"] .auth-pass-toggle {
  color: var(--fd-text-muted) !important;
}

html[data-theme="dark"] .auth-card .auth-field .auth-input-wrap input[readonly]:focus,
html[data-theme="dark"] .auth-modal-box .auth-field .auth-input-wrap input[readonly]:focus {
  background: var(--fd-surface-2) !important;
  border-color: var(--fd-border-strong) !important;
}

/* Napačno geslo (v485, user-login.php): obvestilo v obrazcu namesto rdeče vrstice na vrhu */
.auth-alert {
  clear: both;
  margin: -8px 0 18px;
  padding: 12px 14px;
  border: 1px solid #f3c4c4;
  border-radius: 10px;
  background: #fdeeee;
  color: #a12020;
  font-size: 14px;
  line-height: 1.45;
}

.auth-alert strong {
  font-weight: 600;
  word-break: break-all;
}

html[data-theme="dark"] .auth-alert {
  background: rgba(229, 57, 53, 0.12);
  border-color: rgba(229, 57, 53, 0.35);
  color: var(--fd-danger);
}