/* Tema MODERNO (2026-10-28, prototip — index2.php, body.tema-moderno).
   Uporabnik: kristali delujejo »preveč kot bombon, otroško, neprofesionalno« → čiste linije, prevladuje BELA z visokim
   sijajem, druga barva VIJOLIČNA Blind Magika (#e040fb) z visokim sijajem (lakirana površina) samo za poudarke.
   Recept: neumorfne sence iz style.css utišamo prek spremenljivk (svetla senca = prozorna) → ostane ena mehka senca;
   enotni manjši radiji; bela s sijajem = rahel preliv bela → skoraj bela + ostra bela linija zgoraj (inset).
   Spolna žarnica kartic (.glow-*) ostane — spremenijo se le spremenljivke, ne pravila. */

.tema-moderno {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f3f8;
  --border: #e6e3ee;
  --text: #17151c;
  --text-sec: #6b6875;
  --accent: #e040fb;
  --radius: 14px;
  --radius-sm: 10px;
  /* Sodobna pisava za besedilo (2026-10-28, uporabnik: »več modernosti«) — Quicksand je zaobljena in igriva; logotip ostane Pacifico. */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow-dark: rgba(28, 16, 48, .10);
  --shadow-light: rgba(255, 255, 255, 0);
  /* vijolični lak: svetlejši zgoraj, globlji spodaj + sijaj zgornje polovice */
  --mo-lak: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 52%),
            linear-gradient(180deg, #ef72ff 0%, #e040fb 46%, #b51fd6 100%);
  --mo-lak-senca: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(70,0,90,.25), 0 8px 18px -8px rgba(160,30,200,.6);
  /* bel lak */
  --mo-belo: linear-gradient(180deg, #ffffff 0%, #fbfafd 100%);
  /* Ostri robovi (2026-10-28): jasen 1px rob + kratka, tesna senca (ne razmazana) */
  --mo-senca: 0 1px 0 rgba(28,16,48,.04), 0 2px 5px rgba(28,16,48,.07), 0 14px 26px -18px rgba(28,16,48,.22);
  --mo-rob: 1px solid #d9d5e3;
}

html:has(body.tema-moderno) { background: #f6f5f9; }
body.tema-moderno {
  background:
    radial-gradient(1200px 520px at 50% -180px, rgba(224,64,251,.07), transparent 70%),
    linear-gradient(180deg, #ffffff 0, #f6f5f9 420px) no-repeat;
  color: var(--text);
}

/* ── Glava in noga: bela, ena tanka linija ───────────────────────────── */
.tema-moderno .nav { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 #ebe8f2, 0 6px 20px -14px rgba(28,16,48,.25); }
/* noga-fiksna = plavajoča kartica (2026-10-28) → akrilna plošča z LED robom spodaj (.tema-moderno .noga-fiksna pri --mo-akril) */

/* ── Naslov ─────────────────────────────────────────────────────────── */
.tema-moderno h1 { letter-spacing: -.01em; font-weight: 700; }
.tema-moderno .hero-face {
  background: linear-gradient(180deg, #f07cff 0%, #e040fb 50%, #a91bd0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 6px rgba(160,30,200,.25));
}
.tema-moderno .hero-tagline { animation: none; background: none; -webkit-text-fill-color: #b51fd6; color: #b51fd6; letter-spacing: .01em; }

/* ── Ploskve: bele s sijajem, ena mehka senca, tanek rob ─────────────── */
.tema-moderno .card,
.tema-moderno .filter-bar,
.tema-moderno .promo-kartica,
.tema-moderno .pod-kartica,
.tema-moderno .kaj-je-face,
.tema-moderno #poudarkiSpol,
.tema-moderno .auth-card {
  background: var(--mo-belo) !important;
  border: var(--mo-rob);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 #fff, var(--mo-senca);
}
.tema-moderno .pod-kartica { border-left: 3px solid rgba(var(--pod-barva, 224,64,251), .55); }
.tema-moderno .pod-kartica:hover, .tema-moderno .kaj-je-face:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28,16,48,.05), 0 20px 40px -18px rgba(28,16,48,.3); }

/* ── Zavihki vstopne strani: pravi »registratorski« zavihki (2026-10-28, uporabnik: »morajo biti bolj jasno zavihki«) ──
   Črta pod vrsto zavihkov; aktivni zavihek je bel, z ostrim robom zgoraj/levo/desno, odprt navzdol (prekrije črto) in
   ima zgoraj vijolični lakiran trak; neaktivni so svetlo sivi jezički z robom. */
.tema-moderno .vstop-zavihki {
  gap: 4px; padding: 0 2px; background: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid #cfcadb;
}
.tema-moderno .vstop-zavihek {
  position: relative; margin-bottom: -1px; border: 1px solid #dcd8e5; border-bottom: 1px solid #cfcadb;
  border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #f6f5f9, #eeecf3); color: var(--text-sec);
  box-shadow: inset 0 1px 0 #fff; font-weight: 600;
}
.tema-moderno .vstop-zavihek:hover { background: linear-gradient(180deg, #ffffff, #f4f2f8); color: var(--text); }
.tema-moderno .vstop-zavihek.aktiven {
  z-index: 1; color: #a01bc4; background: #fff; text-shadow: none;
  border: 1px solid #cfcadb; border-bottom: 1px solid #fff;
  box-shadow: 0 -4px 12px -8px rgba(28,16,48,.25);
}
.tema-moderno .vstop-zavihek.aktiven::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: 10px 10px 0 0;
  background: var(--mo-lak); box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
/* ── Gumbi ──────────────────────────────────────────────────────────── */
.tema-moderno .btn { border-radius: 10px; font-weight: 600; }
.tema-moderno .btn-primary {
  border: 1px solid #b51fd6; background: var(--mo-lak); box-shadow: var(--mo-lak-senca); color: #fff; text-shadow: 0 1px 1px rgba(90,0,110,.35);
}
.tema-moderno .btn-primary:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(70,0,90,.25), 0 12px 24px -10px rgba(160,30,200,.7); }
.tema-moderno .btn-secondary {
  border: 1px solid #e1ddea; background: var(--mo-belo); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28,16,48,.08); color: var(--text);
}
.tema-moderno .btn-secondary:hover { border-color: #d2c3e6; }

/* ── Polja ──────────────────────────────────────────────────────────── */
.tema-moderno input:not([type=checkbox]):not([type=radio]), .tema-moderno select, .tema-moderno textarea {
  background: #fff; border: 1px solid #dedae7; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(28,16,48,.06);
}
.tema-moderno input:focus, .tema-moderno select:focus, .tema-moderno textarea:focus {
  border-color: #e040fb; box-shadow: 0 0 0 3px rgba(224,64,251,.16);
}

/* ── Kartice profilov: bele, tanek rob, čist »gumb« z imenom ─────────── */
.tema-moderno .profil-kartica { border: var(--mo-rob); border-radius: var(--radius); background: #fff; }
.tema-moderno #profilGridWrap .profil-kartica-info {
  background: var(--mo-belo); border: 1px solid #e3dfeb; border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28,16,48,.06);
}
.tema-moderno #profilGridWrap .profil-kartica-info:hover { box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(160,30,200,.45); border-color: #ecd2f5; }

/* ── Glavni zavihki aplikacije in čipi (za kasnejši prenos) ──────────── */
.tema-moderno .panel-tabs { background: #efedf4; box-shadow: inset 0 1px 2px rgba(28,16,48,.08); border-radius: 12px; }
.tema-moderno .panel-tab.active, .tema-moderno :is(.zm-podzavihek, .uj-chip).aktiven, .tema-moderno .chip.selected {
  color: #fff; background: var(--mo-lak); box-shadow: var(--mo-lak-senca); text-shadow: 0 1px 1px rgba(90,0,110,.35);
}
.tema-moderno :is(.zm-podzavihek, .chip, .uj-chip) { background: var(--mo-belo); border: 1px solid #e6e3ee; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28,16,48,.06); }

/* Žig »Brez naročnine …« — čist obris namesto zasukanega žiga. */
.tema-moderno .freebie-stamp { transform: none; border-width: 1.5px; border-radius: 8px; letter-spacing: .06em; }
/* Info vrstica nad profili — brez barvnega žarenja. */
.tema-moderno .info-zarenje { animation: none; text-shadow: none; }

/* Pisava Inter: naslovi malce tesnejši, gumbi in oznake polkrepki (bolj »aplikacijski« videz). */
.tema-moderno, .tema-moderno button, .tema-moderno input, .tema-moderno select, .tema-moderno textarea { font-family: var(--font); }
.tema-moderno h1, .tema-moderno h2, .tema-moderno h3 { letter-spacing: -.02em; }
.tema-moderno .nav-logo, .tema-moderno .hero-face, .tema-moderno .nav-drzava { font-family: var(--font-logo); letter-spacing: 0; }
/* ══ Akrilne plošče z LED robom (2026-10-28, uporabnik pokazal vzorec) ═══════════════════════════════════════════════
   Svetlo siva lakirana plošča (akril) z zrcaljenjem oken (mehki poševni beli pasovi), debel bel odsev roba in modri LED
   sij okoli. Kartice profilov namenoma NE (imajo svojo modro/rdečo žarnico spola). Ozadje strani svetlo sivo, da sij zaživi. */
html:has(body.tema-moderno) { background: #e9e9ed; }
body.tema-moderno { background: linear-gradient(180deg, #f1f1f4 0, #e9e9ed 520px) no-repeat; }
.tema-moderno {
  --mo-akril:
    linear-gradient(102deg, transparent 0 58%, rgba(255,255,255,.42) 58.5% 64%, rgba(255,255,255,.10) 64.5% 66%, rgba(255,255,255,.30) 66.5% 73%, transparent 73.5%),
    linear-gradient(98deg, transparent 0 12%, rgba(255,255,255,.22) 12.5% 20%, transparent 20.5%),
    radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f2f2f5 0%, #e7e7eb 100%);
  --mo-led: inset 0 0 0 1.5px rgba(255,255,255,.95), inset 0 3px 2px -1px #fff, inset 0 -3px 6px -2px rgba(120,130,150,.25),
            0 0 0 1px rgba(110,180,255,.85), 0 0 10px 1px rgba(90,170,255,.55), 0 0 26px 4px rgba(90,170,255,.28), 0 10px 22px -12px rgba(30,40,70,.35);
}
.tema-moderno .card,
.tema-moderno .filter-bar,
.tema-moderno .pod-kartica,
.tema-moderno .kaj-je-face,
.tema-moderno #poudarkiSpol {
  background: var(--mo-akril) !important;
  border: 0; border-radius: 16px;
  box-shadow: var(--mo-led);
}
.tema-moderno .noga-fiksna { background: var(--mo-akril); border: 0; border-radius: 18px; box-shadow: var(--mo-led); }
.tema-moderno .pod-kartica { border-left: 0; }
.tema-moderno .pod-kartica:hover, .tema-moderno .kaj-je-face:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px #fff, inset 0 3px 2px -1px #fff, inset 0 -3px 6px -2px rgba(120,130,150,.25),
    0 0 0 1px rgba(120,190,255,.95), 0 0 14px 2px rgba(90,170,255,.7), 0 0 34px 6px rgba(90,170,255,.35), 0 16px 28px -14px rgba(30,40,70,.4);
}
/* Polja na akrilu: čisto bela, da se ločijo od plošče. */
.tema-moderno :is(.card, .filter-bar, .pod-kartica) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { background: #fff; }
/* Aktivni zavihek se zlije s sivim ozadjem strani. */
.tema-moderno .vstop-zavihek.aktiven { background: #f2f2f5; border-bottom-color: #f2f2f5; }
/* ══ Zavihki in gumbi: sijaj + 3D (2026-10-28, uporabnik: »zavihki nimajo sijaja; dodaj malo 3D«) ════════════════════
   Akrilni zavihki z odsevom zgornje polovice; 3D = brušen svetel rob zgoraj/ob straneh + temnejša »stranica« spodaj
   (inset), aktivni ima še vijolični lakiran trak in modri LED sij kot plošče. Gumbi dobijo spodnjo stranico (debelino). */
.tema-moderno .vstop-zavihek {
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 52%),
    linear-gradient(100deg, transparent 0 62%, rgba(255,255,255,.35) 62.5% 68%, transparent 68.5%),
    linear-gradient(180deg, #ececf0 0%, #dcdce2 100%);
  border: 1px solid #c9c7d3; border-bottom-color: #cfcadb;
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255,255,255,.7), inset -1px 0 0 rgba(255,255,255,.7),
    inset 0 -3px 4px -2px rgba(80,85,110,.28), 0 -2px 6px -3px rgba(30,40,70,.25);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.tema-moderno .vstop-zavihek:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 52%),
    linear-gradient(100deg, transparent 0 62%, rgba(255,255,255,.4) 62.5% 68%, transparent 68.5%),
    linear-gradient(180deg, #f3f3f6 0%, #e4e4e9 100%);
}
.tema-moderno .vstop-zavihek.aktiven {
  transform: translateY(-3px); padding-bottom: calc(.75rem + 3px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 52%),
    linear-gradient(100deg, transparent 0 62%, rgba(255,255,255,.45) 62.5% 68%, transparent 68.5%),
    linear-gradient(180deg, #fbfbfd 0%, #f2f2f5 100%);
  border: 1px solid #b9c8e6; border-bottom-color: #f2f2f5;
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff,
    0 0 0 1px rgba(110,180,255,.55), 0 -4px 14px -4px rgba(90,170,255,.55);
}
.tema-moderno .vstop-zavihek.aktiven::before { height: 5px; }
@media (max-width: 560px) { .tema-moderno .vstop-zavihek.aktiven { padding-bottom: calc(.55rem + 3px); } }

/* Gumbi: vidna debelina (spodnja stranica) + pritisk ob kliku. */
.tema-moderno .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(90,0,120,.35), 0 2px 0 #8f16ab, 0 8px 16px -8px rgba(160,30,200,.65);
}
.tema-moderno .btn-secondary {
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(120,120,140,.12), 0 2px 0 #cfccd8, 0 6px 12px -8px rgba(30,40,70,.3);
}
.tema-moderno .btn:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
/* ── Prijava / registracija (2026-10-28) — akrilna kartica z LED robom, preklop kot dva lakirana gumba ───────────── */
.tema-moderno .auth-card { background: var(--mo-akril) !important; border: 0; border-radius: 18px; box-shadow: var(--mo-led); }
.tema-moderno .tab-switch { gap: 4px; padding: 4px; background: #e3e2e8; border-radius: 12px; box-shadow: inset 0 1px 3px rgba(28,16,48,.15); }
.tema-moderno .tab-check { flex: 1; justify-content: center; padding: .6rem .5rem; border-radius: 9px; transition: background .15s; }
.tema-moderno .tab-check-box { display: none; }
.tema-moderno .tab-check-label { font-size: .95rem; color: var(--text-sec) !important; text-shadow: none; }
.tema-moderno .tab-check:hover { background: rgba(255,255,255,.55); }
.tema-moderno .tab-check:has(input:checked) { background: var(--mo-lak); box-shadow: var(--mo-lak-senca), 0 2px 0 #8f16ab; }
.tema-moderno .tab-check:has(input:checked) .tab-check-label { color: #fff !important; text-shadow: 0 1px 1px rgba(90,0,110,.35); }

/* Ikone zavihkov (2026-10-28): različica teme moderno. */
.tema-moderno .vstop-zavihek[data-vz="info"] i { background-image: url('/img/ikone/moderno/info.svg'); }
.tema-moderno .vstop-zavihek[data-vz="profili"] i { background-image: url('/img/ikone/moderno/profili.svg'); }
.tema-moderno .vstop-zavihek[data-vz="demo"] i { background-image: url('/img/ikone/moderno/demo.svg'); }
.tema-moderno .vstop-zavihek[data-vz="varnost"] i { background-image: url('/img/ikone/moderno/varnost.svg'); }
.tema-moderno .gumb-ik[data-ik="prijava"] { background-image: url('/img/ikone/moderno/prijava.svg'); }
.tema-moderno .gumb-ik[data-ik="registracija"] { background-image: url('/img/ikone/moderno/registracija-bela.svg'); }