/* ═══════════════════════════════════════════════════════════════════
   TERMINA — ovoj aplikacije

   Samo strani aplikacije (najdi, moj, skupnost, ponudnik, rezervacija);
   naloži se za podoba.css. Spodnja vrstica zavihkov, ena izpostavljena
   fotografska kartica nad tihimi vrsticami seznama, izbrani dan v kremu
   in izbrana ura v karameli, vrstica napredka rezervacije in pripeta
   kremna kartica z dejanjem.
   ═══════════════════════════════════════════════════════════════════ */

/* ── spodnja vrstica zavihkov ─────────────────────────────────────── */
/* Vrstica je SAMO v aplikaciji iz trgovine (lastnica, 29. 9. 2026: na
   spletu je ni). Ovoj se pozna po [data-nativno] na korenu (nativno.js);
   brskalnik vrstice ne izriše in main ne nosi odmika zanjo. */
.zavihki{display:none}
[data-nativno] main{padding-bottom:124px}
/* Vrstica zavihkov je PLAVAJOČA STEKLENA PILULA (lastnica, 6. 9. 2026, po
   zgledih Loopsy; od predloge Zate 23. 10. 2026 po njeni risbi): 12 px od
   robov in nad varnim robom, mlečno steklo. SAMO ZNAKI, brez napisov
   (lastnica, 27. 10. 2026: »izbriši zapise, pusti samo ikonice«): ime
   zavihka ostane v HTML kot .zav-ime, skrito za oko, da ga bralnik zaslona
   prebere kot ime povezave. Izbrani zavihek nosi znak v ČRNILNI piluli s
   kremnim znakom (izbrano je črnilo, karamela ni podlaga).
   Steklo je TANKO (--steklo-tanko, 50 % beline; lastnica, 27. 10. 2026:
   »glass efekt«): brez napisov na njem ni drobnega besedila, znak pa je
   grafika in potrebuje 3 : 1 proti steklu tudi nad temno fotografijo
   (izmerjeno na izrisanih pikslih, prizor zavihki-ikone). Ikone so polne
   in krepke, ne tanke črte — na 24 px se tanka črta izgubi. */
[data-nativno] .zavihki{
  /* top:auto premaga nav{top:0} iz lupine — sicer se raztegne čez ves zaslon */
  position:fixed;top:auto;z-index:40;
  left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));
  bottom:calc(12px + env(safe-area-inset-bottom,0));
  max-width:440px;margin:0 auto;
  border:1px solid var(--steklo-rob,rgba(255,255,255,.75));border-radius:999px;
  background:var(--steklo-tanko,rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 16px 34px -14px rgba(110,80,50,.34),0 2px 6px rgba(36,28,20,.05);
  display:flex;justify-content:space-around;align-items:stretch;
  padding:4px 6px;
}
.zavihki a{
  position:relative;flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:56px;min-width:44px;padding:0 2px;
  font-family:var(--body);font-weight:500;font-size:11.5px;line-height:1.2;
  letter-spacing:0;text-transform:none;
  color:var(--telo);border-radius:999px;text-decoration:none;
  transition:color .18s ease-out;
  /* Sivi pravokotnik, ki ga iOS nariše ob dotiku, je segal čez CELO tarčo
     in se je dotikal sosednje pilule (lastnica, 19. 9. 2026). Odziv na
     dotik rišemo sami, spodaj na ::before. */
  -webkit-tap-highlight-color:transparent;
}
/* PILULA JE MANJŠA OD TARČE. Tarča je ves zavihek (vsaj 44 px, v resnici
   56), ker se je dotika palec; pilula stoji samo za znakom (60 × 40, na
   sredini), zato se sosednji pilulici nikoli ne dotakneta. Barva stoji na ::before in ne
   na ozadju povezave, ker bi zaobljeni robovi pri obrezovanju odpadli. */
.zavihki a::before{
  content:'';position:absolute;top:50%;left:50%;width:60px;height:40px;margin:-20px 0 0 -30px;border-radius:999px;
  background:transparent;transition:background-color .18s ease-out;
}
.zavihki a > *{position:relative}
.zavihki a:active::before{background:rgba(36,28,20,.06)}
.zavihki a svg{width:24px;height:24px;display:block;flex:none;fill:currentColor;stroke:none}
.zavihki a .zav-ime,.skrito-vidno{
  position:absolute;width:1px;height:1px;overflow:hidden;margin:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-nativno] .zavihki{background:rgba(255,255,255,.92)}
}
@media (prefers-reduced-transparency:reduce){
  [data-nativno] .zavihki{background:var(--plosca,#FFFFFF);border-color:var(--gravura);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
/* --zavihek-znak je krem znamke #F2EADF na črnilu (izmerjeno 14,9 : 1) */
.zavihki{--zavihek-znak:#F2EADF}
.zavihki a.on{color:var(--slonovina);font-weight:600}
.zavihki a.on::before{background:var(--slonovina)}
.zavihki a.on svg,.zavihki a.on .zav-oseba{color:var(--zavihek-znak)}
@media (hover:hover) and (pointer:fine){.zavihki a:not(.on):hover::before{background:var(--tan-sled)}}
.zavihki a:focus-visible{outline:2px solid var(--medenina);outline-offset:-2px}
/* Značka neprebranih na zavihku Sporočila (potez.js): gori samo, kadar je
   kaj neprebranega v odprtem pogovoru — prošnje štejejo na svoji strani. */
.zavihki a .znacka{
  position:absolute;top:calc(50% - 21px);left:calc(50% + 8px);min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;font-family:var(--num);font-size:11px;line-height:1;
  color:var(--na-tanu);background:var(--mrak);border:2px solid var(--ohisje);border-radius:999px;
}
.zavihki a .znacka[hidden]{display:none}
/* Profil je okrogla ploščica s fotografijo ali logotipom prijavljene osebe
   (zavihki.js); brez seje ali slike ostane figura, stranka brez slike dobi
   začetnico. Rob je currentColor, da izbrani zavihek pobarva tudi okvir. */
.zavihki a .zav-oseba{
  position:relative;
  width:24px;height:24px;border-radius:50%;overflow:hidden;box-sizing:border-box;
  display:grid;place-items:center;border:1.6px solid currentColor;
  /* Krogec je bil nižji od drugih znakov: ti so 26 px visoki bloki, obroba
     okoli 28 px kroga pa je vrstico potisnila navzdol. Ista višina kot
     sosedje in poravnava po sredini ga postavita v isto črto (lastnica, s
     telefona, 17. 9. 2026). */
  align-self:center;flex:none;
}
.zavihki a .zav-oseba svg{width:17px;height:17px}
/* Slika je ODLEPLJENA in razpeta čez ves krogec. V mreži s place-items:center
   se `height:100%` meri po vrstici, vrstico pa je določila sama slika: pri
   ležeči fotografiji je bila vrstica nižja od krogca in nad sliko je ostal
   bel pas — fotografija je bila videti odrezana zgoraj (lastnica, s
   telefona, 17. 9. 2026). Absolutna razpetost te odvisnosti nima. */
.zavihki a .zav-oseba img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.zavihki a .zav-oseba .zac{font-family:var(--num);font-size:12px;line-height:1}
.zavihki a .zav-oseba.slika{border-color:var(--gravura)}
.zavihki a.on .zav-oseba.slika{border-color:var(--zavihek-znak)}
@media(prefers-reduced-motion:reduce){.zavihki a,.zavihki a::before{transition:none}}

/* Prehod med zavihki (prehod.js, potez.js; lastnica, 18. 10. 2026:
   »smooth in hitreje«). Stran, ki jo odpre zavihek, se izriše z vsebino
   SKRITO — razred postavi prehod.js v <head> pred prvim izrisom — in
   vsebino nato pripelje z nasprotne strani poteze. Vrstica zavihkov,
   glava in atmosfera so zunaj main in stojijo. Pripet element v main, ki
   leži v rišočem predniku, med potegom zbledi (prehod-skrit), ker bi ga
   premik prednika odlepil od zaslona. Prehoda med dokumenti (View
   Transitions) ni: WebKit med njim ustavi izris nove strani (prehod.js). */
html.prehod-cakaj main,html.prehod-cakaj body > footer{opacity:0}
.prehod-skrit{opacity:0 !important;transition:opacity .12s ease-out}

/* Noga in vrstica zavihkov: noga stoji ZUNAJ main, zato ji odmik
   main{padding-bottom:118px} nič ne pomaga in zadnja vrstica noge
   (avtorstvo) obleži pod pripeto vrstico. Noga na straneh z vrstico zato
   nosi še njeno višino; :has, ker vse strani s to datoteko vrstice
   nimajo. */
[data-nativno] body:has(.zavihki) footer{
  padding-bottom:calc(48px + 72px + env(safe-area-inset-bottom,0));
}

/* ── seznam ponudnikov: fotografske kartice (smer E, lastnica 6. 9. 2026) ──
   Vsaka kartica je fotografija zgoraj in bela noga spodaj: ime, kraj in
   »od X €« levo, črnilna pilula Rezerviraj desno. Nič več ene izpostavljene
   in tihih vrstic — v aplikaciji je vsak ponudnik enako viden. Vezano na
   RAZRED .grid, ker mrežo rišeta iskanje, kategorija in bližina. */
.grid{grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr;gap:14px}}
.grid .pcard{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  background-color:var(--plosca);background-image:none;
  border:1px solid var(--gravura-2);border-radius:20px;
  box-shadow:0 6px 20px rgba(36,28,20,.06);
  min-height:0;
}
@media (hover:hover) and (pointer:fine){.grid .pcard:hover{background:var(--plosca);border-color:var(--gravura)}}
.grid .pcard .pfoto{
  position:relative;height:150px;border:none;border-radius:0;
  background:var(--oder-1);overflow:hidden;
}
.grid .pcard.izpostavljen .pfoto{height:190px}
.grid .pcard .pfoto img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
/* brez fotografije: oprana ploskev z začetnico, ne prazen pravokotnik */
.grid .pcard .pfoto .zac{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:300;font-size:56px;color:var(--foto-napis);opacity:.55;
}
.grid .pcard .pfoto::after{display:none}
.grid .pcard .pkat{
  position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--slonovina);
  font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.02em;
}
/* proste ure danes: na fotografiji, na zastoru */
.grid .pcard .prosto{font-size:var(--t-sm);color:var(--telo);margin-top:4px}
.grid .pcard .ure{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:6px;
  flex-wrap:nowrap;overflow:hidden;background:transparent;padding:0;order:0;flex-basis:auto}
.grid .pcard .ure span{background:rgba(23,15,10,.62);backdrop-filter:blur(8px);
  border:1px solid transparent;color:var(--foto-napis);font-size:12px;padding:4px 9px;border-radius:999px}
.grid .pcard .pnoga{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px 14px;
}
.grid .pcard .ptext{min-width:0;flex:1 1 auto}
/* Dolgo ime ali beseda brez presledka se prelomi in ustavi pri dveh
   vrsticah, ne zdrsne pod Rezerviraj; polno ime nosi title (kartica.js). */
.grid .pcard .name{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.1;color:var(--slonovina);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* kraj, ki se prelomi, ostane poravnan z bucko na prvi vrstici */
.grid .pcard .meta{display:flex;align-items:flex-start;gap:4px;margin-top:4px;
  font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--telo-2)}
.grid .pcard .meta svg{width:14px;height:14px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.grid .pcard .rate{margin:4px 0 0;padding:0;background:transparent;font-size:12px;color:var(--telo-2)}
.grid .pcard .rate .none{display:none}
.grid .pcard .pdej{
  flex:none;padding:10px 14px;border-radius:999px;
  background:var(--slonovina);color:var(--ohisje);
  font-family:var(--body);font-weight:600;font-size:13px;white-space:nowrap;
}
.grid .pcard .phead,.grid .pcard .pav,.grid .pcard .odd{display:none}

/* ── Najdi in Blizu: zadetki kot VRSTICE (lastnica, 28. 10. 2026, del 4) ──
   Po prototipu »Najdi«: bela ploskev z enim velikim radijem (20 px),
   fotografija 84 px z radijem 10, ime 16/600 v dveh vrsticah, meta 14 px
   »skupina · kraj · razdalja« in podpis v medenini »Prvi prost termin
   danes ob 15:30«. Vsebina je trdna: brez stekla in brez zameglitve, ker
   ne lebdi. Kartica.js (vrsta) riše: .pkarta.pvrsta > .pfoto + .ptext
   (a.pcard z imenom, .meta, .prosto ali .zdaj-prosto) + .shrani.
   Povezava je ime; njen ::after razpne tarčo čez celo vrstico. */
.vrstice{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:1024px){.vrstice{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.vrstice .pvrsta{
  position:relative;display:flex;align-items:center;gap:14px;min-width:0;
  padding:10px 10px 10px 10px;min-height:106px;
  background:var(--plosca);border:1px solid var(--gravura-2);border-radius:20px;box-shadow:none;
  transition:transform var(--t-press) var(--ease-out),border-color var(--t-small) ease;
}
/* Pritisk se pokaže v trenutku dotika (Emil, Apple): rahel stisk vrstice,
   samo ko je pritisnjena povezava — zaznamek in Zdaj prosto imata svoj. */
.vrstice .pvrsta:has(.pcard:active){transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.vrstice .pvrsta:has(.pcard:hover){border-color:var(--gravura)}}
.vrstice .pfoto{
  position:relative;flex:none;width:84px;height:84px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;background:var(--kat-mavrica-tiha,none) var(--kat-tih,var(--noc));
}
.vrstice .pfoto img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
/* Brez fotografije: bled odtenek skupine in začetnica v isti barvi. */
.vrstice .pfoto .zac{font-family:var(--body);font-weight:600;font-size:30px;line-height:1;
  color:var(--kat-tekst,var(--telo-2))}
.vrstice .ptext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
/* prostor za zaznamek samo ob imenu in meti; podpis sme do roba */
.vrstice .ptext>.pcard,.vrstice .ptext>.meta{padding-right:38px}
.vrstice .pcard{
  position:static;display:block;min-height:0;padding:0;overflow:visible;
  background:none;border:0;border-radius:0;box-shadow:none;transform:none;
  color:var(--slonovina);text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.vrstice .pcard:focus-visible{transform:none;background:none}
@media (hover:hover) and (pointer:fine){.vrstice .pcard:hover{transform:none;background:none}}
/* Tarča je cela vrstica; fokusni obroč riše ista razpeta ploskev. */
.vrstice .pcard::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
.vrstice .pcard:focus-visible{outline:none}
.vrstice .pcard:focus-visible::after{outline:2px solid var(--medenina);outline-offset:2px}
.vrstice .pcard .name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--body);font-weight:600;font-size:16px;line-height:1.3;letter-spacing:-.01em;
  color:var(--slonovina);overflow-wrap:anywhere;
}
.vrstice .pcard .izbor-znak{margin:2px 0 0;font-size:12.5px}
.vrstice .meta{
  font-family:var(--body);font-size:14px;line-height:1.4;color:var(--telo-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;
}
/* Podpis Termine: prva prosta ura, iz podatkov seznama (kartica.js). */
.vrstice .prosto{font-family:var(--body);font-weight:600;font-size:14px;line-height:1.4;color:var(--medenina);
  font-variant-numeric:tabular-nums}
/* Zdaj prosto stoji namesto podpisa: isti napis v medenini z živim
   obročem, a svoja tarča (44 px) naravnost v rezervacijo z uro. */
.vrstice .pvrsta .zdaj-prosto{
  position:relative;z-index:2;align-self:flex-start;min-height:44px;margin:-10px 0 -12px -8px;padding:0 8px;
  background:transparent;border-radius:12px;color:var(--medenina);font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){.vrstice .pvrsta .zdaj-prosto:hover{background:var(--tan-sled);color:var(--medenina)}}
.vrstice .pvrsta .zdaj-obroc{box-shadow:inset 0 0 0 2px var(--plosca),inset 0 0 0 6px var(--medenina)}
/* Zaznamek: vsebina je trdna, zato brez stekla; znak v --telo-2 (6,1:1). */
.vrstice .pvrsta .shrani{
  top:6px;right:6px;z-index:2;background:transparent;border-color:transparent;color:var(--telo-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:color var(--t-small) ease,transform var(--t-press) var(--ease-out);
}
.vrstice .pvrsta .shrani:active{transform:scale(.92)}
.vrstice .pvrsta .shrani.on{color:var(--medenina);border-color:transparent}
.vrstice .pvrsta .shrani:focus-visible{outline:2px solid var(--medenina);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.vrstice .pvrsta .shrani:hover{color:var(--medenina);border-color:transparent}}
@media(prefers-reduced-motion:reduce){
  .vrstice .pvrsta,.vrstice .pvrsta .shrani{transition:none}
  .vrstice .pvrsta:has(.pcard:active),.vrstice .pvrsta .shrani:active{transform:none}
}

/* ── rezervacija: trak napredka in izbire ─────────────────────────── */
.napredek{display:flex;gap:8px;margin:4px 0 22px}
.napredek span{flex:1;height:4px;border-radius:999px;background:var(--noc)}
.napredek span.on{background:var(--medenina)}

/* izbrani dan je KREM (prototip: dan krem, ura karamela) */
.dnevi .dan{background:var(--noc);border-color:var(--gravura-2);color:var(--slonovina)}
.dnevi .dan b{color:var(--slonovina)}
.dnevi .dan span{color:var(--telo-2)}
.dnevi .dan.sel{background:var(--i-bg);border-color:var(--i-bg)}
.dnevi .dan.sel b{color:var(--i-naslov)}
.dnevi .dan.sel span{color:var(--i-telo-2)}

/* izbrana kartica ponudnika v koraku 1 */
.card.sel{background:var(--noc);border-color:var(--medenina)}

/* povzetek in zaključni prizor: KREM — edina svetla ploskev */
/* (razred .krem dodan v HTML; tu samo drobnosti) */
.summary b{color:var(--slonovina)}
.done{background:var(--i-bg);border-radius:var(--r-velika);
  --slonovina:var(--i-naslov);--telo:var(--i-telo);--medenina:var(--i-akcent)}
.done h2{color:var(--i-naslov)}
.done p{color:var(--i-telo)}
.done .big{color:var(--i-akcent);font-family:var(--num)}
.done .btn-s{border-color:var(--i-rob-k);color:var(--i-naslov)}
.t-signal .ring{stroke:var(--i-cip) !important}
.t-signal .dot{fill:var(--i-akcent) !important}
.t-signal .rip{stroke:var(--i-akcent) !important}

/* fotografske celice skupnosti/profila ostajajo temne; napisi na zastoru
   (podoba.css) — tu samo mehkejši radij */
.obj-grid .celica,#foto-grid>div{border-radius:var(--r-foto)}

/* prijavna kartica je krem (razred v HTML); avatar disk pod znakom */
.auth-sig{background:transparent;border:none}

/* profil: pripeta STEKLENA pilula dejanja (lastnica, 4. 10. 2026: prosojno
   namesto črnila) — pripeta na dno, v ovoju nad vrstico zavihkov, na spletu
   ob samem dnu; ne lebdi sredi vsebine. Steklo je gostejše od --steklo
   (.72), ker pod pilulo drsi tudi fotografija galerije: na črnem pod njo
   da .88 belo ~rgb(224), kjer je --telo še 7:1 in črnilo 12:1 (izmerjeno). */
.pripeto{
  position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:30;
  max-width:560px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 10px 10px 18px;border-radius:999px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--meja);
  box-shadow:0 10px 30px rgba(36,28,20,.18);
}
/* brez zameglitve prosojnost ni slog, ampak nečitljivost: ploskev je bela */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pripeto{background:#FFFFFF}
}
[data-nativno] .pripeto{bottom:calc(98px + env(safe-area-inset-bottom,0))}
/* ena vrstica tudi pri dolgem imenu: ime se skrajša s tropičjem, gumb ne
   pade pod besedilo (pravilo .actions na strani dovoli prelom) */
.pripeto{flex-wrap:nowrap}
.pripeto>div{min-width:0;flex:1}
.pripeto .btn{flex:none;border-radius:999px;min-height:44px;padding:0 18px;font-weight:600}
/* Dva gumba (Rezerviraj in Podari bon) na ozkem telefonu: besedilo levo
   se umakne, gumba se stisneta. Pri 320 px je Podari bon sicer stal 52 px
   čez rob zaslona (server/prekrivanje.mjs). */
@media(max-width:440px){
  .pripeto:has(#bon-kupi:not([hidden])) > div{display:none}
  .pripeto:has(#bon-kupi:not([hidden])){justify-content:center;gap:10px;padding:8px}
  .pripeto:has(#bon-kupi:not([hidden])) .btn{padding:0 14px;flex:1 1 auto}
}
/* Glavni gumb na pripeti kartici nosi mehak karamelni sij (po zgledu
   Lively, lastnica 27. 9. 2026): edini poudarek na zaslonu, ki počasi
   diha. Sij je senca okoli kremne pilule na črnilu, ne barva gumba. */
.pripeto .kat-dej{
  box-shadow:0 0 0 0 rgba(200,155,109,0),0 0 22px rgba(200,155,109,.45);
  animation:kat-dej-sij 3.4s ease-in-out infinite;
}
@keyframes kat-dej-sij{
  0%,100%{box-shadow:0 0 0 0 rgba(200,155,109,0),0 0 16px rgba(200,155,109,.35)}
  50%{box-shadow:0 0 0 3px rgba(200,155,109,.18),0 0 30px rgba(200,155,109,.62)}
}
@media(prefers-reduced-motion:reduce){.pripeto .kat-dej{animation:none}}

/* ── postopen prihod (po zgledu Lively, lastnica 27. 9. 2026) ──────────
   Otroci vsebnika .vstop pridejo eden za drugim: kratek dvig in
   odtemnitev, 28 ms zamika na kartico, največ dvanajst — kar je pod
   pregibom, pride skupaj. Vsebnik dobi razred v HTML; JS ni potreben,
   ob ponovnem izrisu se animacija zažene znova, ker so otroci novi. */
.vstop>*{animation:vstop-kartice .42s cubic-bezier(.16,.84,.3,1) both}
.vstop>:nth-child(2){animation-delay:28ms}
.vstop>:nth-child(3){animation-delay:56ms}
.vstop>:nth-child(4){animation-delay:84ms}
.vstop>:nth-child(5){animation-delay:112ms}
.vstop>:nth-child(6){animation-delay:140ms}
.vstop>:nth-child(7){animation-delay:168ms}
.vstop>:nth-child(8){animation-delay:196ms}
.vstop>:nth-child(9){animation-delay:224ms}
.vstop>:nth-child(10){animation-delay:252ms}
.vstop>:nth-child(11){animation-delay:280ms}
.vstop>:nth-child(n+12){animation-delay:300ms}
@keyframes vstop-kartice{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vstop>*{animation:none}}
/* napis in ime v črnilu na steklu: --telo (ne --telo-2), ker steklo nad
   fotografijo podlago potemni in bi tišji ton padel pod 4,5 */
.pripeto .naslov{font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--telo)}
.pripeto .kaj{font-family:var(--display);font-weight:300;font-size:var(--t-lg);color:var(--slonovina);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── inspiracija ob rezervaciji: reference za stilistko ────────────
   Predaja »add visual inspiration for the stylist«. Izbira se iz
   fotografij, ki so pri salonu ŽE objavljene; filter je vir, ne
   barva ali slog — takih oznak v Termini ni. */
.insp{border:1px solid var(--meja);border-radius:var(--r-kartica);padding:16px 18px;margin-bottom:18px}
.insp-glava{display:flex;align-items:center;justify-content:space-between;gap:14px}
/* gumb ostane v eni vrstici; pri 390 px se je »Izberi slike« prelomil v dve */
.insp-glava .btn{flex:none;white-space:nowrap}
.insp-nasl{font-family:var(--display);font-weight:400;font-size:var(--t-base);color:var(--slonovina)}
.insp-pod{font-size:var(--t-sm);color:var(--telo-2);margin-top:2px}
.insp-kup{display:flex;margin-top:14px}
.insp-kup[hidden]{display:none}
.insp-kup img,.insp-kup .vec{width:34px;height:34px;border-radius:999px;object-fit:cover;
  border:2px solid var(--ohisje);margin-left:-10px;display:block;filter:var(--foto-filter)}
.insp-kup :first-child{margin-left:0}
.insp-kup .vec{display:grid;place-items:center;background:var(--i-bg);color:var(--i-naslov);
  font-family:var(--num);font-size:var(--t-micro);filter:none}

/* podlago in zameglitev nosi pravilo NADSLOJI v podoba.css */
.insp-list{position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;padding:18px 16px 0}
.insp-list[hidden]{display:none}
.insp-list header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.insp-list h2{font-family:var(--display);font-weight:300;font-size:var(--t-xl);color:var(--slonovina)}
.insp-list header p{font-size:var(--t-sm);color:var(--telo-2);margin-top:2px}
.insp-list header [tabindex="-1"]:focus-visible{outline:none}
/* Nazaj je gola puščica brez okvira (lastnica, 29. 9. 2026), tarča 44 px. */
.insp-nazaj{min-width:44px;min-height:44px;border-radius:999px;border:none;
  background:none;color:var(--slonovina);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.insp-nazaj svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.insp-filtri{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.insp-filtri button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--meja);
  background:none;color:var(--telo);font-family:var(--body);font-size:var(--t-sm);cursor:pointer}
.insp-filtri button.on{background:var(--i-bg);border-color:var(--i-bg);color:var(--i-naslov)}
.insp-mreza{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow-y:auto;
  flex:1;min-height:0;padding-bottom:104px;align-content:start}
.insp-celica{position:relative;aspect-ratio:4/5;border-radius:var(--r-kartica);overflow:hidden;
  border:none;padding:0;background:var(--i-bg);cursor:pointer;display:block}
.insp-celica img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
.insp-celica .avtor{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;text-align:left;
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.04em;color:var(--foto-napis);
  background:var(--foto-zastor);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-celica .znak{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:999px;
  background:var(--foto-zastor);color:var(--foto-napis);display:grid;place-items:center}
.insp-celica .znak svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.insp-celica .znak .kljuka{display:none}
.insp-celica[aria-pressed="true"]{box-shadow:0 0 0 3px var(--medenina)}
/* fokusni obroč ohrani radij celice — splošno pravilo ga zbije na 6 px */
.insp-celica:focus-visible,.insp-filtri button:focus-visible{border-radius:var(--r-kartica)}
.insp-filtri button:focus-visible,.insp-nazaj:focus-visible{border-radius:var(--r-oval)}
.insp-celica[aria-pressed="true"] .znak{background:var(--i-gumb);color:var(--i-gumb-tekst)}
.insp-celica[aria-pressed="true"] .znak .plus{display:none}
.insp-celica[aria-pressed="true"] .znak .kljuka{display:block}
.insp-pilula{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 10px 10px 20px;border-radius:999px;background:var(--steklo-gosto,var(--steklo));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--meja);box-shadow:var(--senca-pilula)}
.insp-pilula .n{font-family:var(--num);font-size:var(--t-sm);color:var(--slonovina)}
.insp-prazno{padding:28px 4px;color:var(--telo-2);font-size:var(--t-sm)}
@media(prefers-reduced-motion:reduce){.insp-celica{transition:none}}


/* ── ikona sporočil v glavi (potez.js) ──────────────────────────────────
 * Sporočila imajo svojo stran; do nje vodita ikona in poteg v levo.
 * Tarča je 44 px tudi takrat, ko je risba 22 px — palec ne meri ikone,
 * ampak polje okoli nje.
 */
.ikona-sporocila{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:44px;height:44px;margin:-10px -8px -10px 0;
  border-radius:var(--r-oval);color:var(--telo);
}
.ikona-sporocila svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.ikona-sporocila:hover{color:var(--sij);background:var(--tan-sled)}}
.ikona-sporocila:focus-visible{outline:2px solid var(--mrak);outline-offset:2px}
/* Značka gori SAMO ob neprebranem; značka, ki gori vedno, ne pomeni nič. */
.ikona-sporocila .znacka{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  font-family:var(--num);font-size:11px;line-height:1;
  color:var(--na-tanu);background:var(--mrak);
  border:2px solid var(--ohisje);border-radius:var(--r-oval);
}

/* ── opozorilo ob odprtju (opozorilo.js) ─────────────────────────────
   Zahteva za doplačilo je zahtevek za denar z rokom in mora biti vidna
   takoj, ne dva klika globoko. Kartica in ne modal: plačilo, ki prekrije
   aplikacijo, je izsiljevanje.

   Ploskev je tonirana karamela (--tan-mehki), ne obrnjena — na pogledu
   je ENA obrnjena ploskev in ta je rezervirana za glavno dejanje strani. */
.opozorilo{
  border:1px solid var(--medenina);
  border-radius:var(--r-kartica);
  background:var(--tan-mehki);
  padding:16px 18px 18px;
  margin:0 0 20px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.opozorilo.vidno{opacity:1;transform:none}
.opz-vrh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.opz-nadnapis{
  flex:1;font-family:var(--num);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  /* Akcent na TONIRANI ploskvi: v svetli temi temneje, v temni svetleje.
     --medenina-d je tu meril 4,42 na espressu (izmerjeno) in je padel. */
  color:var(--akcent-ton);
}
/* Tarča 44 px tudi pri risbi 18 px — palec ne meri ikone. */
.opz-zapri{
  flex:none;width:44px;height:44px;margin:-12px -12px -12px 0;
  display:grid;place-items:center;border:none;background:none;cursor:pointer;
  color:var(--telo-2);border-radius:var(--r-oval);
}
.opz-zapri svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){.opz-zapri:hover{color:var(--slonovina)}}
.opz-zapri:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.opz-znesek{font-family:var(--num);font-weight:200;font-size:var(--t-xl);
  line-height:1.1;color:var(--slonovina)}
.opz-kaj{font-size:var(--t-sm);color:var(--telo);margin-top:3px}
.opz-vec{font-size:var(--t-sm);color:var(--telo-2);margin-top:6px}
.opz-gumb{min-height:44px}
.opz-takoj{font-size:var(--t-sm);color:var(--telo);margin-top:10px;line-height:1.5}
.opz-dej{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.opz-vprasaj{min-height:44px;display:inline-flex;align-items:center;font-size:var(--t-sm);color:var(--telo);text-decoration:underline;text-underline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .opozorilo{opacity:1;transform:none;transition:none}
}

/* ── zaznamek na kartici ponudnika ─────────────────────────────────
   Predloga, ki jo je naročnica prinesla, ima na vsaki kartici zaznamek.
   Pri nas to ni nova zmožnost, ampak druga pot do iste: »Sledim«. Ena
   stvar, dve mesti — s seznama in s profila.

   Gumb je BRAT povezave in ne njen otrok: <button> znotraj <a> je
   neveljaven HTML, bralnik zaslona pa ga najavi kot del povezave in
   kartice ni več mogoče odpreti s tipkovnico brez tega, da bi se prej
   sprožil zaznamek. */
.pkarta{position:relative}
.shrani{
  position:absolute;top:10px;right:10px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  /* Rob je edini obris krmilnega elementa, zato --rob-k in ne --gravura:
     lasast rob je pri gumbu okras, tu pa nosi mejo (3,48:1 na belem). */
  background:var(--steklo-gosto,var(--steklo));border:1px solid var(--rob-k);
  color:var(--telo-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .18s,border-color .18s,background .18s;
}
.shrani svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.shrani:hover{color:var(--medenina);border-color:var(--karamela-rob)}}
/* Shranjeno ni samo druga barva: znak se ZAPOLNI. Barva sama ni nosilec
   pomena (WCAG 1.4.1), in pri zaznamku je polnilo naravni znak za »noter«. */
.shrani.on{color:var(--medenina);border-color:var(--karamela-rob)}
.shrani.on svg{fill:currentColor}
/* Na izpostavljeni fotografski kartici je podlaga temna. Svetlo steklo bi
   pod belo ikono postalo svetlo siv krožec s komaj vidnim znakom (izmerjeno
   1,5:1); napis na fotografiji pri nas vedno leži na zastoru, in tu velja
   isto — temen zastor, svetla ikona. */
.grid .pkarta .shrani{
  background:var(--foto-zastor);border-color:var(--gravura-2);
  color:var(--foto-napis);
}
.grid .pkarta .shrani.on{color:var(--karamela);border-color:var(--karamela-rob)}@media (hover:hover) and (pointer:fine){.grid .pkarta .shrani:hover{color:var(--karamela);border-color:var(--karamela-rob)}}

/* Število zadetkov. Brez njega seznam ne pove, ali je kratek zaradi filtra
   ali zato, ker toliko ponudnikov pač je. */
.stevec{
  font-family:var(--num);font-size:var(--t-sm);letter-spacing:.06em;
  color:var(--telo-2);margin:0 0 12px;
}
.stevec[hidden]{display:none}

/* ── glava računa (moj.html) ───────────────────────────────────────
   POZOR: ta glava se NE sme imenovati .pglava — tako se imenuje naslovni
   prizor na strani ponudnika (postavitev.css, toplina.css) in ta datoteka
   se naloži ZA njim. Trčenje je bilo najdeno, ko je mreža računa legla
   čez prizor s fotografijo.
   Predloga postavi nad zavihke obraz, ime in dve števki. Števki nista
   okras: sta edini mesti, kjer stranka na prvi pogled vidi, koliko ji
   Termina pravzaprav hrani — in obe sta gumb, ki pelje na svoj zavihek.
   Zato sta <button> in ne <div> s poslušalcem: tipkovnica ju najde,
   bralnik zaslona ju najavi kot gumba, palec ima 44 px. */
/* Oder kot na profilu ponudnika (lastnica, 29. 9. 2026): strankina
   fotografija čez celo širino, zamegljena in oprana, na njej ostra slika
   v krogu in ime v lahki Outfit; čez spodnji rob sega kremna kartica s
   števkama. Oder seže čez zgornji odmik main (36 px iz lupine). */
.mglava{
  position:relative;overflow:hidden;
  margin:-36px calc(50% - 50vw) 0;width:100vw;
  min-height:min(46vh,400px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 0 34px;
  border-radius:0 0 var(--r-velika,36px) var(--r-velika,36px);
  background:var(--oder-1);
}
/* inset:0 in ne negativen: element zunaj zaslona bi meritev širine
   štela kot vodoravno drsenje. Rob zameglitve pokrije zastor. */
.moder-foto{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:var(--foto-filter) blur(14px);opacity:0;
  transition:opacity .4s ease-out;
}
.moder-foto.ima{opacity:.85}
/* Zastor drži kontrast na VSAKI fotografiji: v pasu napisa je črnilo .85. */
.mglava::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,10,.42) 0%,rgba(20,14,10,.3) 35%,rgba(20,14,10,.86) 100%);
}
.moder-vsebina{
  position:relative;width:100%;max-width:var(--mera);margin:0 auto;
  padding:0 var(--rob-strani,24px);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.pobraz{
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  /* Polna karamela s črnilom je izmerjena (7,28); gradient pod začetnico
     ne prenese nobene ene barve. */
  background:var(--karamela);color:#1C130D;
  font-family:var(--display);font-weight:400;font-size:30px;line-height:1;
  /* gumb: dotik izbere sliko; svetel rob ga loči od fotografije za njim */
  position:relative;border:2px solid rgba(255,255,255,.82);padding:0;cursor:pointer;overflow:visible;
  box-shadow:0 8px 24px rgba(20,14,10,.35);
}
.pobraz img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.pobraz:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Plus v kotu pove, da je slika spremenljiva. Črnilo na beli ploščici z
   lasastim robom: bere se tudi na karameli in na fotografiji. */
.pobraz .pobraz-plus{
  position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;
  background:#FFFFFF;color:#241C14;border:1px solid rgba(36,28,20,.18);
  display:grid;place-items:center;
}
.pobraz .pobraz-plus svg{width:12px;height:12px}
.pobraz.nalaga{opacity:.6;pointer-events:none}
/* V glavi stoji samo ime: pozdrav in e-naslov sta odstranjena (lastnica,
   16. 9. 2026). E-naslov ostane v razdelku Račun. */
.pime{min-width:0}
.mglava .meta{margin:0 0 8px;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF;opacity:.9}
/* #acc h1 iz postavitev.css nosi id, zato tudi tu id: napis je na odru bel. */
.mglava h1,#acc .mglava h1{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(34px,9vw,44px);letter-spacing:-.02em;line-height:1.02;
  color:#FFFFFF;overflow-wrap:anywhere}
/* Kremna kartica s števkama sega čez rob odra; krem je barva znamke. */
.pstevci{
  position:relative;z-index:1;display:flex;gap:10px;
  margin:-26px 0 22px;padding:12px;
  background:#F2EADF;border-radius:28px;box-shadow:0 10px 30px rgba(36,28,20,.12);
}
.pst{
  flex:1 1 0;min-width:0;min-height:64px;padding:12px 16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:#FFFFFF;border:1px solid rgba(36,28,20,.1);
  border-radius:20px;cursor:pointer;text-align:left;
  transition:border-color .18s;
}
@media (hover:hover) and (pointer:fine){.pst:hover{border-color:var(--karamela-rob)}}
.pst .n{font-family:var(--num);font-weight:200;font-size:var(--t-xl);
  line-height:1;color:var(--slonovina)}
.pst .l{font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--telo-2)}

@media(min-width:620px){
  .mglava{min-height:340px}
  .mglava h1,#acc .mglava h1{font-size:52px}
  .pstevci{justify-content:flex-start}
  .pst{flex:0 0 auto;min-width:150px}
}
@media(prefers-reduced-motion:reduce){ .pst{transition:none} .moder-foto{transition:none} }

/* ── naslovna galerija na profilu ─────────────────────────────────
   Kadar ima ponudnik v novicah še fotografije, naslovni prizor lista.
   Pike so kazalnik, ne gumbi: gumb premera 8 px nima tarče 44 px,
   poteg in tipkovnica (fokusabilna regija) pa listata že sama. */
.pkartica.galerija{background-image:none}
.pkartica .gal{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.pkartica .gal::-webkit-scrollbar{display:none}
.pkartica .gal:focus-visible{outline:2px solid var(--medenina);outline-offset:-2px}
.pkartica .gal .sl{position:relative;flex:0 0 100%;scroll-snap-align:start}
.pkartica .gal img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--foto-filter);
}
/* Zastor na VSAKI sliki: skupni bi ob potegu obstal, ta potuje s sliko
   in je prehod neviden, ker sta zastora enaka. Isti recept kot
   .pkartica[data-slika]::before. */
.pkartica .gal .sl::after{
  content:"";position:absolute;inset:0;
  background:var(--foto-zastor);
  pointer-events:none;
}
.pkartica.galerija::before{display:none}
.gal-pike{
  position:relative;display:flex;gap:6px;justify-content:center;
  padding:0 0 10px;pointer-events:none;
}
.gal-pike span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(242,232,216,.45);transition:background .18s;
}
.gal-pike span.on{background:var(--karamela)}
@media(prefers-reduced-motion:reduce){
  .pkartica .gal{scroll-behavior:auto}
  .gal-pike span{transition:none}
}

/* ── opis: pet vrstic, potem »Preberi več« ────────────────────────── */
.about.strnjen{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
}
.o-vec{margin:-14px 0 22px;min-height:44px;padding:0 2px;
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:var(--t-sm)}
.o-vec[hidden]{display:none}

/* ── podobni ponudniki ────────────────────────────────────────────── */
.podobni{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pod-k{
  display:flex;align-items:center;gap:12px;min-height:64px;
  padding:10px 14px;background:var(--plosca);
  border:1px solid var(--gravura-2);border-radius:var(--r-drobno);
}
@media (hover:hover) and (pointer:fine){.pod-k:hover{border-color:var(--karamela-rob)}}
.pod-k .pav{
  flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--karamela);color:#1C130D;display:grid;place-items:center;
  font-family:var(--display);font-size:17px;
}
.pod-k .pav img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
.pod-k .kdo{min-width:0;display:grid;gap:2px}
.pod-k .nm{font-family:var(--display);font-weight:300;font-size:var(--t-base);color:var(--slonovina);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-k .mt{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.05em;
  text-transform:uppercase;color:var(--telo-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── srce na fotografiji skupnosti ─────────────────────────────────
   Isti krožec kot zaznamek, na fotografiji, torej na zastoru (svetlo
   steklo je pod belo risbo že enkrat padlo na 1,5:1). S številom src
   se krožec raztegne v pilulo. Polno srce, ne samo barva (WCAG 1.4.1). */
.shrani.srce{
  width:auto;min-width:44px;padding:0 12px;gap:5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--foto-zastor);border-color:var(--gravura-2);
  color:var(--foto-napis);
}
.shrani.srce.on{color:var(--karamela);border-color:var(--karamela-rob)}@media (hover:hover) and (pointer:fine){.shrani.srce:hover{color:var(--karamela);border-color:var(--karamela-rob)}}
.shrani.srce .n{font-family:var(--num);font-size:var(--t-xs);letter-spacing:.03em;line-height:1}


/* ═══════════════════════════════════════════════════════════════════
   SMER E (lastnica, 6. 9. 2026): postavitev fotografske aplikacije na
   beli podlagi z barvami Termine. Naslovi Outfit 500, bela podlaga tudi
   na profilu ponudnika (barva kategorije ostane akcent, ne podlaga),
   fotografska glava čez celo širino, storitve kot vrstice z gumbom Izberi.
   ═══════════════════════════════════════════════════════════════════ */
main h1,main h2,.grid .pcard .name{font-weight:500;letter-spacing:-.01em}
main>h1{font-size:26px;margin-bottom:14px}
main h2{font-size:20px}
/* Naslov je ene barve; poudarjena beseda ne skoči v medenino (lastnica:
   dvobarvno besedilo moti). */
main>h1 em{font-style:normal;color:inherit}

/* iskanje: vstopa v bližino in odkrivanje sta dve piluli v vrsti, ne dve
   veliki kartici z opisom */
.vstopi{display:flex;gap:8px;margin:0 0 16px}
.vstopi .vstop-blizu{flex:1 1 0;min-height:44px;padding:0 14px;gap:8px;border-radius:999px;margin:0;
  background:var(--noc);border:1px solid transparent}
.vstopi .vb-znak{width:auto;height:auto;background:transparent;border:none}
.vstopi .vb-znak svg{width:18px;height:18px}
.vstopi .vb-ime{font-family:var(--body);font-weight:500;font-size:14px;color:var(--slonovina)}
.vstopi .vb-opis,.vstopi .vb-pusc{display:none}
.search{margin-bottom:14px}
.search input,#q{border-radius:999px;background:var(--noc);border-color:transparent;padding-left:18px}
/* izbrani čip je črnilo, ne karamela */
.sk.on .sk-p,.cat.on,.cats button.on{background:var(--slonovina);border-color:var(--slonovina);color:var(--ohisje)}
.stevec{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--body);
  letter-spacing:0;font-size:13px;margin:0 0 10px}

/* profil ponudnika: bela podlaga, kategorija je akcent */
body.kat-oder{
  --ohisje:#FFFFFF;--globina:#F3EFE9;--noc:#F6F2EC;--plosca:#FFFFFF;--plosca-hi:#FFFFFF;
  --kartica:#FFFFFF;--mleko:#FFFFFF;--papir-2:#FAF7F2;--vdolbina:#FAF7F2;--vdolbina-2:#FAF7F2;
  background:#FFFFFF;
}
/* ── naslovni prizor (vzor lastnice, 29. 9. 2026: studio N99) ──────
   Fotografija je oder čez celo širino in visok kot polovica zaslona; na
   njej stoji samo IME v lahki Outfit, nad njim dejavnost in kraj v
   razmaknjenih verzalkah, pod njim ocena. Spodnji rob je velik radij
   (36), čezenj sega kremna kartica z dejstvi — prva trdna ploskev, na
   katero stranka stopi s fotografije. */
main#main{padding-top:0;padding-bottom:210px}
.pglava{margin:0 calc(50% - 50vw) 0;padding:0;width:100vw}
.pglava .pkartica,.pkartica.galerija{
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  position:relative;left:0;right:0;min-height:min(58vh,520px);padding:0 0 30px;
  border:none;border-radius:0 0 var(--r-velika,36px) var(--r-velika,36px);overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--oder-1);
}
/* Zastor mora držati kontrast na VSAKI fotografiji, tudi na skoraj beli:
   v pasu napisa (spodnjih 45 %) je črnilo pri .8 in več. */
.pkartica[data-slika]::before{background:linear-gradient(180deg,rgba(20,14,10,.38) 0%,rgba(20,14,10,.22) 30%,rgba(20,14,10,.78) 58%,rgba(20,14,10,.92) 100%)}
.pkartica:not([data-slika])::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,0) 30%,rgba(20,14,10,.5))}
.pkartica .pkartica-t{display:flex;flex-direction:column;text-align:left;padding:0 var(--rob-strani,20px) 8px;width:100%}
.pkartica .meta{order:-1;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;
  /* slonovina in ne karamela: karamela je na zastoru merila 3,85:1 */
  text-transform:uppercase;color:var(--foto-napis);opacity:.9;margin:0 0 10px}
.pkartica h1{font-family:var(--display);font-weight:300;font-size:clamp(34px,9vw,44px);letter-spacing:-.02em;
  text-transform:none;line-height:1.02;color:#fff;overflow-wrap:anywhere}
.pkartica .rate{text-align:left;padding:2px var(--rob-strani,20px) 22px;font-size:13px}
@media(min-width:760px){
  .pglava .pkartica,.pkartica.galerija{min-height:460px;padding-bottom:36px}
  .pkartica h1{font-size:56px}
  /* Napis stoji na levem robu VSEBINE (main je ožji od odra čez zaslon). */
  .pkartica .pkartica-t,.pkartica .rate{
    padding-left:calc((100vw - min(100vw, var(--mera, 1180px))) / 2 + var(--rob-strani, 20px));
    padding-right:calc((100vw - min(100vw, var(--mera, 1180px))) / 2 + var(--rob-strani, 20px))}
}
/* Kremna kartica z dejstvi sega čez rob fotografije. Krem je barva
   znamke (CGP v11); ploščice na njej so bele, izmerjene na kremu. */
.pdejstva{position:relative;z-index:1;margin:-26px 0 18px;padding:12px;
  background:#F2EADF;border-radius:28px;box-shadow:0 10px 30px rgba(36,28,20,.12);
  display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pdejstva:empty{display:none}
/* Štiri enake ploščice: ikona, oznaka v verzalkah in vrednost v Outfit
   (lastnica, 29. 9. 2026). Bela na kremu, izmerjeno. */
.pdej{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 14px;
  background:#FFFFFF;border:1px solid rgba(36,28,20,.1);border-radius:18px;min-width:0}
.pdej svg{width:18px;height:18px;flex:none;color:var(--medenina)}
.pdej-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pdej .l{font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--telo-2);line-height:1.2}
.pdej .v{font-family:var(--display);font-weight:400;font-size:var(--t-md);line-height:1.2;
  color:var(--slonovina);overflow-wrap:anywhere}
@media(min-width:620px){.pdejstva{grid-template-columns:repeat(4,1fr)}}
/* Predogled za lastnika: tiha vrstica nad prizorom, ne opozorilo. */
.predogled{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--noc);
  border:1px solid var(--gravura-2);font-size:var(--t-sm);color:var(--telo);line-height:1.45}
.predogled a{color:var(--slonovina);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.predogled[hidden]{display:none}
/* zavihki profila: skok na razdelek */
/* Telo profila: bela kartica z robovi kot oder in kremna kartica, brez
   črte pod zavihki (lastnica, 29. 9. 2026). */
.ptelo{margin:26px 0 0;padding:20px 18px 22px;background:#FFFFFF;
  border:1px solid var(--gravura-2);border-radius:28px;box-shadow:0 12px 32px rgba(36,28,20,.08)}
.pzavihki{display:flex;gap:8px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;border-bottom:none}
.pzavihki::-webkit-scrollbar{display:none}
.pzavihki a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  background:var(--noc);color:var(--slonovina);font-size:13px;font-weight:500;text-decoration:none}
.pzavihki a.on{background:var(--slonovina);color:var(--ohisje)}
.pzavihki a[hidden]{display:none}

/* ── profil kot spletna stran (lastnica, 30. 9. 2026) ─────────────────
   Števci na odru, koledar prostih ur, galerija z ogledom, objave kot
   kartice, O meni z dejstvi. */
.pstat{display:flex;gap:26px;padding:0 var(--rob-strani,20px);margin:-12px 0 0}
.pstat span{display:flex;flex-direction:column;gap:3px}
.pstat b{font-family:var(--display);font-weight:400;font-size:var(--t-xl);line-height:1;color:#fff}
.pstat small{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--foto-napis)}
@media(min-width:760px){
  .pstat{padding-left:calc((100vw - min(100vw, var(--mera, 1180px))) / 2 + var(--rob-strani, 20px))}
}
.pdejanja{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.ptelo > section.prvi{border-top:none;padding-top:10px}
.osek-glava{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.osek-glava h2{margin-bottom:6px}
.osek-vec{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;font-size:var(--t-sm);color:var(--telo);text-decoration:underline;text-underline-offset:3px}
.osek-opis{font-size:var(--t-sm);color:var(--telo-2);margin:0 0 14px}
/* koledar prostih ur: sedem dni kot kartice, ure kot pilule-povezave */
.ter-trak{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;scrollbar-width:none}
.ter-trak::-webkit-scrollbar{display:none}
.ter-dan{flex:0 0 auto;width:108px;scroll-snap-align:start;border:1px solid var(--gravura-2);border-radius:18px;
  background:#FFFFFF;padding:12px 10px 10px;display:flex;flex-direction:column;gap:10px}
.ter-dan.prazen{background:var(--vdolbina)}
.ter-dan .td{display:flex;flex-direction:column;align-items:center;gap:3px}
.ter-dan .td .d{font-family:var(--body);font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--telo-2)}
.ter-dan.danes .td .d{color:var(--medenina)}
.ter-dan .td b{font-family:var(--display);font-weight:400;font-size:var(--t-xl);line-height:1;color:var(--slonovina)}
.ter-dan .ure{display:flex;flex-direction:column;gap:6px}
.ter-dan .ura{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;
  border:1px solid var(--gravura);background:var(--plosca);color:var(--slonovina);
  font-family:var(--num);font-size:var(--t-sm);text-decoration:none}
@media (hover:hover) and (pointer:fine){.ter-dan .ura:hover{border-color:var(--slonovina)}}
.ter-dan .ni{font-size:var(--t-xs);color:var(--telo-2);text-align:center;padding:14px 0}
/* galerija: mreža kvadratov, dotik odpre ogled */
.gal-mreza{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(min-width:620px){.gal-mreza{grid-template-columns:repeat(4,1fr)}}
.gal-cel{position:relative;aspect-ratio:1;border:none;padding:0;border-radius:14px;overflow:hidden;background:var(--vdolbina);cursor:pointer}
.gal-cel img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
.gal-cel:focus-visible{outline:2px solid var(--slonovina);outline-offset:2px}
/* pokvarjena slika v galeriji: temen oder z oznako na zastoru (ponudnik.js) */
.gal-cel.nadomestek{background:radial-gradient(80% 70% at 20% 10%,var(--atm-1),transparent 70%),var(--oder-1);display:grid;place-items:end start;padding:8px}
.gal-oznaka{padding:3px 8px 4px;border-radius:999px;background:var(--foto-zastor);color:var(--i-telo);font-size:var(--t-micro);line-height:1.3}
.gal-dlg{border:none;padding:0;margin:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;background:#17120e;color:#fff}
.gal-dlg::backdrop{background:rgba(20,14,10,.94)}
.gal-dlg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gal-dlg button{position:absolute;z-index:1;width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(20,14,10,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.gal-dlg button[hidden]{display:none}
.gal-dlg button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal-dlg .gal-zapri{top:calc(12px + env(safe-area-inset-top,0));left:12px}
.gal-dlg .gal-prej{left:12px;top:50%;transform:translateY(-50%)}
.gal-dlg .gal-nasl{right:12px;top:50%;transform:translateY(-50%)}
.gal-dlg .gal-stev{position:absolute;z-index:1;top:calc(24px + env(safe-area-inset-top,0));left:0;right:0;text-align:center;
  font-family:var(--num);font-size:var(--t-sm);color:#fff}
.gal-dlg button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* O meni: dejstva kot vrstice oznaka — vrednost */
.o-dejstva{list-style:none;margin:16px 0 0;padding:0}
.o-dejstva li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--gravura-2);font-size:var(--t-sm)}
.o-dejstva li:last-child{border-bottom:none}
.o-dejstva .l{color:var(--telo-2)}
.o-dejstva .v{color:var(--slonovina);font-weight:500;text-align:right}
.about[hidden]{display:none}
/* storitve: vrstica z imenom in trajanjem levo, ceno in Izberi desno */
.pstoritve li{align-items:center;padding:13px 0}
.pstoritve li .t{display:flex;flex-direction:column;gap:3px;font-family:var(--body);font-weight:500;font-size:15px;color:var(--slonovina)}
.pstoritve li .t .tr{font-weight:400;font-size:12px;color:var(--telo-2)}
.pstoritve li .m{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:16px;color:var(--slonovina)}
.pstoritve li .m .kat-cena{color:var(--slonovina);white-space:nowrap}
.pstoritve li .izberi{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  border:1px solid var(--gravura);background:var(--plosca);color:var(--slonovina);
  font-family:var(--body);font-size:12px;font-weight:600;text-decoration:none}
@media(max-width:760px){
  .drobtine{display:none}
  .pdejstva{margin-bottom:16px}
}


/* ── polne ikone (lastnica, 6. 9. 2026) ─────────────────────────────
   Ikone, ki so oblike (oseba, srce, ura, koledar, kraj, sporočilo),
   so polne; ikone, ki so poteze (puščica, križec, kljukica, plus),
   ostanejo črte, malo trdnejše od osnove: 1,9 namesto 1,6–1,8.
   Ikone SKUPIN STORITEV (.ik iz ikone.js) ostanejo pri potezi 1,6 iz
   CGP: pri 2,4 so bile na telefonu težke in grobe (lastnica, s
   telefona, 6. 9. 2026). */
nav a.back .ic,#follow .ic,.vb-pusc,.vb-znak svg,.mesec-glava svg,.opz-zapri svg,
.insp-nazaj svg,.insp-celica .znak svg,.shrani svg,.zem-gumb .ic,.auth-pusc svg,
.rez-nazaj svg,.o-vec svg,.odk-gumbi svg,.btn .ic,.card h2 .ic svg,.onboard h2 .ic svg,
.ikona-sporocila svg,.pregled .uredi svg,.pdej svg,.kat-dej .ic{stroke-width:1.9}

/* ── Ina v kotu (lastnica, 6. 9. 2026) ──────────────────────────────
   Samo v ovoju iz trgovine (ina-gumb.js se na spletu ne zgradi).
   ODSEVNIK: znak znamke sam (obroča, karamelno jedro), brez diska pod njim
   — prozorno ozadje, prilagojeno na vsebino strani z mehko senco namesto
   podlage. Oddaja signal: počasi in neprestano utripa (lastnica, 16. 9.
   2026 — prejšnje pravilo »znak, ki utripa, je oglas« je s tem preklicano
   za ta znak, ostane pa v veljavi povsod drugje). LIST z klepetom je
   NADSLOJ (podoba.css): prosojen in razostren, zato se meri na izrisanih
   pikslih (prizor »ina« v test-piksli). */
.ina-odsev{
  position:fixed;z-index:41;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(84px + env(safe-area-inset-bottom,0));
  width:56px;height:56px;padding:0;border-radius:50%;
  border:none;background:transparent;box-shadow:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  /* backwards, ne both: »both« bi po koncu obdržal končno lego animacije
     in prepisal transform iz .skrit in :active */
  animation:ina-vstop .5s cubic-bezier(.2,.7,.2,1) backwards;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease-out;
}
.ina-odsev:active{transform:scale(.94)}
.ina-odsev:focus-visible{border-radius:50%;outline-offset:3px}
/* Med drsenjem navzdol se umakne pod rob, da ne pokriva pilule Rezerviraj
   na kartici; ob drsenju navzgor ali ko drsenje obstane, se vrne. */
.ina-odsev.skrit{transform:translateY(160px);opacity:0;pointer-events:none}
/* Na prijavnem odru (kremna kartica na temnem) diska ni: ležal je čez
   vogal kartice in povezavo do plošče (lastnica, s telefona, 6. 9. 2026). */
body:has(#auth:not([hidden])) .ina-odsev{display:none}
/* Senca namesto diska drži znak berljiv na katerikoli podlagi strani za
   njim (fotografija, kartica, prazna ploskev) — brez nje bi prozoren znak
   na svetli vsebini skoraj izginil. */
.ina-odsev .znak-slika{
  width:30px;height:30px;
  filter:drop-shadow(0 3px 9px rgba(36,28,20,.38)) drop-shadow(0 1px 3px rgba(36,28,20,.24));
  animation:ina-utrip 3.6s ease-in-out infinite;
}
.ina-odsev::before{
  content:"";position:absolute;inset:13px;border-radius:50%;
  border:1px solid var(--karamela-rob);opacity:0;pointer-events:none;
  animation:ina-halo 3.6s ease-out infinite;
}
@keyframes ina-vstop{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ina-halo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}
@keyframes ina-utrip{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

.ina-oder{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.ina-oder[hidden]{display:none}
/* List pride od SPODNJEGA ROBA (translateY(100%), lastni obseg, ne
   piksli) z mehkim iztekom predala in odide po isti poti, hitreje: prihod
   je dogodek, odhod samo umik. Zastor (.nadsloj::before) se pobledi v
   200 ms namesto da bi se prižgal naenkrat. Med vlekom za ročaj ali glavo
   (ina-gumb.js, razred .vlece) list sledi prstu brez prehoda. Višina v
   dvh: vh na telefonu šteje tudi skrito vrstico brskalnika in list bi
   segel pod rob. */
.ina-oder.nadsloj::before{opacity:0;transition:opacity var(--t-small,200ms) var(--ease-out,cubic-bezier(.23,1,.32,1))}
.ina-oder.nadsloj.odprt::before{opacity:1}
.ina-list{
  width:100%;max-width:560px;height:min(86vh,680px);height:min(86dvh,680px);
  display:flex;flex-direction:column;
  background:var(--plosca);border:1px solid var(--gravura-2);border-bottom:none;
  border-radius:var(--r-kartica) var(--r-kartica) 0 0;
  box-shadow:0 -12px 40px rgba(36,28,20,.18);
  padding:12px 18px calc(16px + env(safe-area-inset-bottom,0));
  transform:translateY(100%);
  transition:transform var(--t-sheet-out,260ms) var(--ease-drawer,cubic-bezier(.32,.72,0,1));
}
.ina-oder.odprt .ina-list{transform:none;transition-duration:var(--t-sheet-in,420ms)}
.ina-oder.vlece .ina-list,.ina-oder.vlece.nadsloj::before{transition:none}
.ina-oder.vlece.nadsloj::before{opacity:var(--zb-zastor,1)}
/* Ročaj je črtica 36 × 4, prijem pa širši: nevidna ploskev okoli nje je
   tarča za palec. Ročaj in glava lista vlečeta sama (touch-action), da
   brskalnik poteze ne vzame za drsenje strani. */
.ina-rocaj{position:relative;width:36px;height:4px;border-radius:2px;background:var(--gravura);margin:0 auto 4px;flex:none;
  touch-action:none;cursor:grab}
.ina-rocaj::after{content:"";position:absolute;inset:-16px -48px -12px}
.ina-list .io-glava{touch-action:none;-webkit-user-select:none;user-select:none}
/* Odprta tipkovnica v ovoju (nativno.js, data-tipkovnica): vrstica
   zavihkov bi plavala nad tipkami in pokrila polje za vnos. */
html[data-tipkovnica] .zavihki{display:none}
/* Oznaka »Umetna inteligenca« (Akt o UI, člen 50; ina-oznaka.js): tonska
   pilula v navadnem zapisu, ob naslovu klepeta in na karticah plošče. */
.ina-oznaka{display:inline-block;flex:none;padding:3px 10px;border-radius:999px;background:var(--papir-2);
  font-family:var(--body);font-size:var(--t-xs);font-weight:500;color:var(--slonovina);line-height:1.4;white-space:nowrap}

/* ── Pogovorno okno z Ino (ina-okno.js; lastnica, 25. 10. 2026) ─────
   Kot nit na Instagramu in pri podpori z umetno inteligenco: glava z
   znakom, imenom in oznako, predstavitev na vrhu toka, mehurčki (Inin z
   znakom ob zadnjem v skupini), pike med pisanjem, predlogi vprašanj in
   pilula z okroglo puščico. Eno okno na treh mestih: Pomoč (#ina),
   Sporočila (#pog-ina) in list v kotu aplikacije (.ina-list). Moj
   mehurček je črnilo, Inin tonska ploskev; brez novih barv. */
.io{display:flex;flex-direction:column;min-height:0;height:100%}
.io-glava{display:flex;align-items:center;gap:12px;padding:14px 18px 12px;flex:none;
  position:static;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.io-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--ohisje);border:1px solid var(--gravura)}
.io-av .znak-slika{width:24px;height:24px}
.io-av.velik{width:76px;height:76px}
.io-av.velik .znak-slika{width:46px;height:46px}
.io-kdo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.io-ime-vrsta{display:flex;align-items:center;gap:8px;min-width:0}
.io-kdo .io-ime{margin:0;padding:0;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.25;color:var(--slonovina);letter-spacing:0}
.io-pod{font-size:15px;line-height:1.35;color:var(--telo-2)}
.io-kdo .io-ime:focus{outline:none}
.io-ikona{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:none;background:none;
  color:var(--slonovina);display:grid;place-items:center;cursor:pointer}
.io-ikona svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.io-nazaj{margin-left:-10px;margin-right:-6px}
.io-zapri{margin-right:-10px}
@media (hover:hover) and (pointer:fine){.io-ikona:hover{background:var(--papir-2)}}
.io-tok{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:4px 18px 10px;scrollbar-width:thin}
.io-uvod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 0 20px}
.io-uvod b{font-family:var(--display);font-weight:400;font-size:21px;color:var(--slonovina);margin-top:4px}
.io-uvod span:not(.io-av):not(.znak-slika){max-width:34ch;font-size:15px;line-height:1.45;color:var(--telo-2)}
.io-nit{display:flex;flex-direction:column;gap:4px}
.io-m,.io-nit>.ina-jaz,.io-nit>.ina-ona{max-width:min(80%,520px);padding:10px 14px;border-radius:20px;font-size:16px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;position:relative}
.io-nit .ina-jaz{align-self:flex-end;background:var(--slonovina);color:var(--ohisje);border-bottom-right-radius:6px}
.io-nit .ina-ona{align-self:flex-start;margin-left:36px;background:var(--noc);color:var(--slonovina);border-bottom-left-radius:6px}
/* skupina: ostri vogal in znak samo ob zadnjem Ininem mehurčku */
.io-nit .ina-ona.nadaljuje{border-bottom-left-radius:20px}
.io-nit .ina-ona:not(.nadaljuje)::before{content:"";position:absolute;left:-36px;bottom:0;width:28px;height:28px;
  border-radius:50%;background:var(--ohisje) var(--znak-slika) center/17px no-repeat;border:1px solid var(--gravura);box-sizing:border-box}
.io-nit .ina-jaz+.ina-ona,.io-nit .ina-ona+.ina-jaz{margin-top:10px}
.io-cas{align-self:center;margin:8px 0 10px;font-family:var(--num);font-size:var(--t-micro);color:var(--telo-2)}
/* pike med pisanjem: tri, ki se dvigajo zapored; ob manj gibanja mirne */
.io-pise{padding:14px 16px}
.io-pike{display:flex;gap:5px;align-items:center;height:10px}
.io-pike i{width:7px;height:7px;border-radius:50%;background:var(--telo-2);opacity:.45;animation:io-pika 1.2s ease-in-out infinite}
.io-pike i:nth-child(2){animation-delay:.15s}
.io-pike i:nth-child(3){animation-delay:.3s}
@keyframes io-pika{0%,60%,100%{opacity:.45;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* kjer Ina ne zmore: pot k ekipi v mehurčku */
.io-k-ekipi{display:flex;width:fit-content;align-items:center;min-height:44px;margin-top:10px;padding:0 18px;
  border-radius:999px;background:var(--ohisje);color:var(--slonovina);font-weight:500;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.io-k-ekipi:hover{text-decoration:underline;text-underline-offset:3px}}
.io-spodaj{flex:none;padding:8px 14px 12px}
.io-soglasje{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;
  padding:12px 14px;border-radius:16px;background:var(--noc)}
.io-soglasje[hidden],.io-predlogi[hidden]{display:none}
.io-soglasje p{flex:1 1 220px;margin:0;font-size:15px;line-height:1.45;color:var(--telo)}
.io-soglasje a{color:var(--medenina);text-decoration:underline;text-underline-offset:2px}
.io-soglasje .btn{flex:none;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--slonovina);border-color:var(--slonovina);color:var(--ohisje);font-weight:500}
@media (hover:hover) and (pointer:fine){.io-soglasje .btn:hover{background:var(--slonovina);border-color:var(--slonovina);color:var(--ohisje)}}
.io-predlogi{display:flex;gap:8px;margin:0 0 10px;padding:2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.io-predlogi::-webkit-scrollbar{display:none}
.io-predlog{scroll-snap-align:start}
/* na širokem zaslonu predlogi stojijo v vrsti brez drsenja */
@media (min-width:761px){.io-predlogi{flex-wrap:wrap;overflow:visible}}
.io-predlog{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rob-k);
  background:var(--ohisje);color:var(--slonovina);font:inherit;font-size:15px;cursor:pointer;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.io-predlog:hover{background:var(--noc)}}
.io-predlog:focus-visible{outline-offset:2px;border-radius:999px}
/* pilula: vnos in okrogla puščica v enem robu, kot na Instagramu */
.io-forma{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 18px;border-radius:999px;
  background:var(--ohisje);border:1px solid var(--rob-k)}
.io-forma:has(input:focus-visible){outline:2px solid var(--medenina);outline-offset:2px}
.io-forma input{flex:1;min-width:0;min-height:44px;padding:0;border:0;border-radius:0;background:none;font-size:16px;color:var(--slonovina)}
.io-forma input:focus,.io-forma input:focus-visible{outline:none;border:0}
.io-poslji{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--slonovina);color:var(--ohisje);display:grid;place-items:center;transition:opacity .15s ease-out}
.io-poslji svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.io-poslji:disabled{opacity:.38;cursor:default}
.io-poslji:focus-visible{outline-offset:3px;border-radius:50%}
.io-opomba{margin:8px 4px 0;font-size:var(--t-micro);line-height:1.5;color:var(--telo-2);text-align:center}
.io-opomba a{color:var(--slonovina);text-decoration:underline;text-underline-offset:2px;
  display:inline-block;padding:13px 4px;margin:-13px -4px}

/* mesta okna: list v kotu aplikacije, Pomoč, Sporočila */
.ina-list .io{flex:1 1 auto}
.ina-list .io-glava{padding:8px 0 10px}
.ina-list .io-tok{padding-left:0;padding-right:0}
.ina-list .io-spodaj{padding:8px 0 0}
.io-kartica{padding:0;overflow:hidden}
#ina .io{height:min(640px,calc(100svh - 190px));min-height:480px}
.pog-ina-okno .io{height:min(700px,calc(100svh - 210px));min-height:460px}
.pog-ina-okno .io-glava,.pog-ina-okno .io-tok,.pog-ina-okno .io-spodaj{padding-left:0;padding-right:0}
/* Ekipa Termine na Pomoči: ista glava in pilula, nit ljudi */
.ekipa .io-glava{padding-bottom:6px}
.ekipa-av{font-family:var(--display);font-size:18px;color:var(--slonovina);background:var(--noc);border-color:transparent}
.ekipa-uvod{margin:0 18px 12px;font-size:15px;line-height:1.5;color:var(--telo-2)}
.ekipa #pomoc-prijava{margin:0 18px 18px}
.ekipa #pomoc-vsebina{padding:0 14px 14px}
.ekipa .nit{padding:4px 4px 12px}
.ekipa .io-forma{margin-top:4px}
/* main > section:first-of-type (postavitev.css) Ekipi Termine vzame
   zgornji rob in ostane samo spodnja črta: vse kartice Pomoči imajo
   cel steklen rob kot okno Ine. */
.pomoc-mreza>.card{border-top-style:solid;border-top-width:1px}
/* Pomoč na računalniku: Ina levo, Ekipa Termine in kontaktne točke desno
   (pregled skilla: en ozek stolpec je pustil dva skoraj prazna zaslona) */
@media (min-width:1000px){
  .pomoc-mreza{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:24px;align-items:start}
  .pomoc-mreza>h1,.pomoc-mreza>.stanje-napake{grid-column:1 / -1}
  .pomoc-mreza>#ina{grid-column:1;grid-row:2 / span 2}
  .pomoc-mreza>#ekipa{grid-column:2;grid-row:2}
  .pomoc-mreza>#dsa{grid-column:2;grid-row:3}
  #ina .io{height:min(720px,calc(100svh - 170px))}
}
/* pripet pogovor z Ino na vrhu Sporočil */
.pog-ina .io-av{width:42px;height:42px;background:var(--ohisje);border:1px solid var(--gravura)}
.pog-ina .io-av .znak-slika{width:26px;height:26px}
.pog-ina-ime{display:flex;align-items:center;gap:8px;min-width:0}
.pog-ina-ime b{display:inline}
.pog-pripeto{flex:none;width:18px;height:18px;fill:none;stroke:var(--telo-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){
  .ina-odsev,.ina-odsev::before,.ina-odsev .znak-slika{animation:none}
  .ina-odsev{transition:none}
  /* manj gibanja: list se ne premakne, samo pobledi (200 ms) */
  .ina-list{transform:none;opacity:0;transition:opacity var(--t-small,200ms) ease-out}
  .ina-oder.odprt .ina-list{opacity:1;transition-duration:var(--t-small,200ms)}
  .io-pike i{animation:none;opacity:.7}
  .io-poslji{transition:none}
}

/* preostali zasloni v smeri E: izbrani zavihek in čip sta črnilo kot v
   iskanju (medenina ostane akcent besedila, ne polnilo izbire); kartice
   z istim radijem in lasastim robom kot kartica ponudnika */
.tab.on,.pill.sel,.cat.on,.chip.on{background:var(--slonovina);border-color:var(--slonovina);color:var(--ohisje)}
.card{border-radius:20px;border:1px solid var(--gravura-2);box-shadow:0 6px 20px rgba(36,28,20,.05)}

/* ── oglasi in akcije: stran kategorije IN domača stran ───────────── */

/* Oglasi stojijo v SVOJEM polju in nikoli med organskimi zadetki.
   Vrinjen oglas med zadetki je zavajajoča poslovna praksa — zato tega ne
   omogoča niti postavitev. Oglasna kartica je navadna kartica: prominenco
   ji da svoj razdelek in ne drugačen videz; enak videz je tudi pošten. */
.oglasi{margin-bottom:26px}
/* Na telefonu se naslov in pojasnilo zložita: v eni vrstici se naslov lomi
   na dve, pojasnilo pa stisne v stolpec širine treh besed. */
.oglasi .osek{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
@media (min-width:620px){
  .oglasi .osek{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
}
.oglasi .osek h2{margin:0}
.oglasi .osek .opojasnilo{font-family:var(--body);font-size:var(--t-xs);color:var(--kamen-d)}
.okarta{position:relative}
/* Oznaka je neprosojna in ne zamegljena: zamegljena ploskev dvigne
   svetlost podlage in izmerjeni kontrast se razlikuje od zapisanega.
   Črnilo pod slonokoščeno je ista dvojica kot na drugih fotografijah. */
.oglas-znak{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;
  height:24px;padding:0 10px;border-radius:999px;
  background:var(--slonovina);color:var(--foto-napis);
  font-family:var(--num);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;
}

/* Predlagano (ni plačano): ista pilula v medenini s kremom — 4,9:1
   (izmerjeno na izbranem zavihku). Plačano ostane v črnilu. */
.predlog-znak{background:var(--medenina);color:#F2EADF}

/* Akcije so brezplačne in za vse: polica, na katero pride vsak viden
   ponudnik z eno akcijo. Barvo nosi kartica (data-kat), ker na domači
   strani stojijo akcije vseh skupin druga ob drugi. */
.akcije{margin-bottom:26px}
.akcije h2{margin:0 0 10px}
.apolica{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.akart{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;text-decoration:none;
  background:var(--kat-mavrica-tiha) var(--kat-tih);color:var(--kat-na-tihem);
  border:1px solid var(--kat-tekst);border-radius:var(--r-drobno);
}
@media (hover:hover) and (pointer:fine){.akart:hover{background:var(--kat-mavrica-tiha) var(--kat-tih)}}
.akart .aav{
  flex:0 0 auto;width:40px;height:40px;border-radius:999px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--plosca-hi);color:var(--medenina);
  font-family:var(--num);font-size:var(--t-sm);
}
.akart .aav img{width:100%;height:100%;object-fit:cover}
.akart .anaslov{font-family:var(--body);font-size:var(--t-sm);line-height:1.35}
.akart .aponudnik{
  display:block;font-family:var(--num);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;opacity:.78;margin-top:3px;
}
.akart .aznesek{margin-left:auto;flex:0 0 auto;font-family:var(--num);font-size:var(--t-md)}

/* ── nazaj v glavi: samo puščica ─────────────────────────────────────
   Besedilo »Najdi« ob puščici je odstranjeno (lastnica, s telefona,
   16. 9. 2026), ostane za bralnik zaslona. Puščica je večja (26 px), tarča
   44×44 px, poteza kot pri drugih ikonah v ovoju. */
nav a.back{min-width:44px;min-height:44px;padding:0;margin:0;justify-content:center;gap:0}
nav a.back .ic{width:26px;height:26px;stroke-width:2.1}
nav a.back span{
  position:absolute;width:1px;height:1px;overflow:hidden;margin:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ── izrez profilne slike ─────────────────────────────────────────────
   Krog na strani je kvadrat na disku: shrani se natanko tisto, kar je v
   okvirju, zato je slika povsod enaka in nikjer odrezana po nesreči
   (lastnica, s telefona, 16. 9. 2026). Okno je kvadratno, krog v njem je
   samo maska — kar je zunaj njega, se ne shrani. */
.izrez-oder{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.izrez-oder[hidden]{display:none}
.izrez-list{
  width:100%;max-width:420px;
  background:var(--plosca);border:1px solid var(--gravura-2);border-radius:var(--r-kartica);
  box-shadow:0 18px 48px rgba(36,28,20,.22);
  padding:20px 20px calc(18px + env(safe-area-inset-bottom,0));
}
.izrez-list h2{margin:0 0 4px;font-family:var(--display);font-weight:500;font-size:20px;color:var(--slonovina)}
.izrez-navodilo{margin:0 0 14px;font-size:var(--t-sm);color:var(--telo-2);line-height:1.45}
.izrez-okno{
  position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  border-radius:var(--r-drobno);background:var(--i-bg);
  touch-action:none;cursor:grab;user-select:none;
}
.izrez-okno img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;display:block;pointer-events:none}
/* Krog pokaže, kaj bo ostalo: zunaj njega ploskev potemni. */
.izrez-krog{
  position:absolute;inset:0;pointer-events:none;border-radius:var(--r-drobno);
  box-shadow:0 0 0 9999px rgba(36,28,20,.46) inset;
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 49.5%, #000 50%);
  mask:radial-gradient(circle at 50% 50%, transparent 0 49.5%, #000 50%);
}
.izrez-zoom{display:flex;align-items:center;gap:12px;margin:14px 0 4px;
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--telo-2)}
.izrez-zoom input{flex:1;min-height:44px;accent-color:var(--medenina)}
.izrez-dejanja{display:flex;gap:10px;margin-top:12px}
.izrez-dejanja .btn{flex:1;min-height:48px;border-radius:999px}

/* ── znaki zaupanja (zaupanje.js, lastnica 4. 10. 2026) ──────────────
   Na odru profila: Termina izbor in Preverjena oseba kot tihi piluli na
   zastoru (belo besedilo, steklena ploskev; zastor je v pasu napisa .78+).
   Obroča pri izboru sta znak znamke v karameli — kot grafika, ne besedilo.
   V razdelku Zaupanje: vsak znak z razlago, kvalifikacije z izdajateljem
   in veljavnostjo. Na kartici v iskanju: izbor kot vrstica v medenini. */
.pznaki{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pznaki[hidden]{display:none}
.pznak{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 8px;border-radius:999px;
  background:rgba(20,14,10,.55);border:1px solid rgba(255,255,255,.38);color:#fff;
  font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pznak svg{width:18px;height:18px;flex:none}
.pznak.izbor svg{color:var(--karamela,#C89B6D)}
.pzaupanje-ovoj{margin-top:22px}
.pzaupanje-ovoj[hidden]{display:none}
.pzaupanje{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.pzaupanje li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;
  background:var(--vdolbina);border:1px solid var(--gravura-2)}
.pzaupanje li.izbor{background:#F2EADF;border-color:var(--karamela-rob)}
.pzaupanje .zi{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#FFFFFF;border:1px solid var(--gravura-2);color:var(--medenina)}
.pzaupanje .zi svg{width:22px;height:22px}
.pzaupanje .zt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pzaupanje .zt b{font-family:var(--body);font-weight:600;font-size:var(--t-md);color:var(--slonovina)}
.pzaupanje .zt small{font-size:var(--t-sm);color:var(--telo);line-height:1.45}
.grid .pcard .izbor-znak,.pcard .izbor-znak{display:inline-flex;align-items:center;gap:5px;margin:3px 0 0;
  font-size:12px;font-weight:600;color:var(--medenina);letter-spacing:.01em}
.pcard .izbor-znak svg{width:15px;height:15px;flex:none}
/* Pogovori | Prošnje: zavihka sta dve tarči, razmik vsaj 6 px (prekrivanje.mjs) */
.pog-nacin.tabs{display:flex;flex-wrap:wrap;gap:10px}