/* ═══════════════════════════════════════════════════════════════════
   Biroplast Solutions — videz privolitvene plasti (28. 9. 2026)
   ───────────────────────────────────────────────────────────────────
   Vse barve, razmiki, zaobljenost in lajšanja so iz obstoječih žetonov
   (tokens.css). Nobene nove barve — pasica mora delovati kot del strani,
   ne kot tuja vtičnica.

   Vsi razredi se začnejo z `zs-`, zato ne morejo trčiti z obstoječimi.
   Datoteko nalagajo samo običajne strani; tv.html je NE nalaga.

   NAČELO ENAKOVREDNOSTI: "Samo nujne" in "Sprejmi vse" imata isti
   razred `.zs-gumb--glavni`, torej isto velikost, isto obrobo, isto
   tipografijo in isti razmik. Razlikujeta se le po barvi ozadja.
   Zavrnitev je pri branju PRVA. Nobena neobvezna kategorija ni vnaprej
   obkljukana.
   ═══════════════════════════════════════════════════════════════════ */

/* ── prva raven: pasica ob dnu ─────────────────────────────────────
   Ni čez celoten zaslon in ne zaklene strani: obiskovalec lahko stran
   bere in uporablja tudi brez odločitve, dokler ne poskusi odpreti
   zunanje vsebine. Neobvezno se v tem času vseeno NE naloži. ─────── */
.zs-pasica{
  position:fixed; left:0; right:0; bottom:0; z-index:9200;
  padding:0 var(--gutter) max(var(--gutter), env(safe-area-inset-bottom));
  pointer-events:none;
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-med) var(--ease-premium),
             transform var(--dur-med) var(--ease-premium);
}
.zs-pasica.je-vidna{ opacity:1; transform:none; }

.zs-pasica-okvir{
  pointer-events:auto;
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:clamp(18px, 3vw, 44px);
  flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(23,34,46,.18), 0 2px 8px rgba(23,34,46,.08);
  padding:clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 32px);
}

.zs-pasica-besedilo{ flex:1 1 380px; min-width:0; }
.zs-naslov{
  font-family:var(--fh); font-weight:700; color:var(--ink);
  font-size:clamp(18px, 1.5vw, 21px); margin:0 0 6px;
  letter-spacing:-.01em;
}
.zs-pasica-besedilo p{
  font-size:15px; line-height:1.55; color:var(--muted); margin:0;
  max-width:62ch;
}
.zs-pasica-vez{ margin-top:10px !important; font-size:13.5px !important; }
.zs-pasica-vez a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.zs-pasica-vez a:hover{ color:var(--navy); }

/* ── gumbi ────────────────────────────────────────────────────────── */
.zs-gumbi{
  flex:0 0 auto; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap;
}
.zs-gumb{
  font-family:var(--fh); font-weight:600; font-size:15px;
  border-radius:var(--r); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-premium),
             border-color var(--dur-fast) var(--ease-premium),
             color var(--dur-fast) var(--ease-premium);
}
/* OBA glavna gumba sta tu — enaka velikost, enaka teža. */
.zs-gumb--glavni{
  padding:12px 22px; border:1.5px solid transparent;
  min-width:148px; text-align:center;
}
.zs-gumb--tih{
  background:var(--surface); border-color:#c2ced9; color:var(--navy);
}
.zs-gumb--tih:hover{ background:var(--surface-alt); border-color:var(--navy); }
.zs-gumb--sprejmi{
  background:var(--grad-green); color:#0d2015; border-color:transparent;
}
.zs-gumb--sprejmi:hover{ filter:brightness(1.05); }
.zs-gumb--vez{
  background:none; border:none; color:var(--blue);
  text-decoration:underline; text-underline-offset:3px;
  padding:12px 6px;
}
.zs-gumb--vez:hover{ color:var(--navy); }

/* ── druga raven: nastavitve ──────────────────────────────────────── */
.zs-plast{
  position:fixed; inset:0; z-index:9300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gutter);
  background:rgba(14,22,32,.58);
  opacity:0; transition:opacity var(--dur-med) var(--ease-premium);
}
.zs-plast.je-vidna{ opacity:1; }

.zs-okno{
  width:100%; max-width:660px; max-height:calc(100vh - 2 * var(--gutter));
  display:flex; flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:0 40px 90px rgba(10,18,28,.42);
  overflow:hidden;
  transform:translateY(12px) scale(.985);
  transition:transform var(--dur-med) var(--ease-premium);
}
.zs-plast.je-vidna .zs-okno{ transform:none; }

.zs-okno-glava{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 24px 16px;
  border-bottom:1px solid var(--line);
}
.zs-zapri{
  flex:0 0 auto; width:38px; height:38px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:50%;
  color:var(--muted); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-premium),
             color var(--dur-fast) var(--ease-premium);
}
.zs-zapri svg{ width:17px; height:17px; }
.zs-zapri:hover{ background:var(--surface-alt); color:var(--ink); }

.zs-okno-telo{
  padding:6px 24px 8px; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.zs-vrstica{ padding:18px 0; border-bottom:1px solid var(--line); }
.zs-vrstica:last-child{ border-bottom:none; }
.zs-vrstica-vrh{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.zs-vrstica-opis{
  margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted);
  max-width:64ch;
}

/* stikalo — pravi <input type="checkbox">, samo vizualno preoblečen,
   zato deluje s tipkovnico in bralnikom zaslona brez dodatne kode */
.zs-stikalo{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.zs-stikalo input{
  position:absolute; width:1px; height:1px; opacity:0;
  margin:0; pointer-events:none;
}
.zs-stikalo-luc{
  flex:0 0 auto; width:46px; height:26px; border-radius:999px;
  background:#c8d3dd; position:relative;
  transition:background var(--dur-fast) var(--ease-premium);
}
.zs-stikalo-luc::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(23,34,46,.3);
  transition:transform var(--dur-fast) var(--ease-premium);
}
.zs-stikalo input:checked + .zs-stikalo-luc{ background:var(--green); }
.zs-stikalo input:checked + .zs-stikalo-luc::after{ transform:translateX(20px); }
.zs-stikalo input:disabled + .zs-stikalo-luc{ background:var(--green); opacity:.45; }
.zs-stikalo input:disabled ~ .zs-stikalo-ime{ color:var(--muted); }
.zs-stikalo input:focus-visible + .zs-stikalo-luc{
  outline:2px solid var(--cyan); outline-offset:3px;
}
.zs-stikalo-ime{
  font-family:var(--fh); font-weight:600; font-size:16px; color:var(--ink);
}
.zs-znacka{
  flex:0 0 auto; font-family:var(--fh); font-weight:600; font-size:11.5px;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--green); background:rgba(24,165,75,.10);
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}

.zs-okno-noga{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
  padding:16px 24px 20px; border-top:1px solid var(--line);
  background:var(--surface-alt);
}

/* ── nadomestni prikaz zunanje vsebine ────────────────────────────
   Uporabljata ga zemljevid (kontakt.html) in video DeliMe. Zapolni
   natanko isti prostor kot vsebina, ki jo nadomešča, zato se ob
   omogočanju nič ne premakne. ───────────────────────────────────── */
.zs-nadomestek{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:28px; text-align:center;
  background:linear-gradient(160deg, var(--ice) 0%, var(--mid) 100%);
  color:var(--ink);
}
.zs-nadomestek--temen{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
}
.zs-nadomestek-ikona{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:rgba(4,123,193,.12); color:var(--blue);
}
.zs-nadomestek--temen .zs-nadomestek-ikona{
  background:rgba(255,255,255,.12); color:#8fe0f7;
}
.zs-nadomestek-ikona svg{ width:22px; height:22px; }
.zs-nadomestek p{
  margin:0; font-size:15px; line-height:1.55; max-width:42ch;
  color:var(--muted);
}
.zs-nadomestek--temen p{ color:var(--muted-on-navy); }
.zs-nadomestek-drobno{ font-size:13px !important; }
.zs-nadomestek-drobno a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.zs-nadomestek--temen .zs-nadomestek-drobno a{ color:#8fe0f7; }

/* ── ozki zasloni ─────────────────────────────────────────────────
   Na telefonu gredo gumbi v polno širino in v isti vrstni red kot na
   namizju. "Samo nujne" ostane prvi in enako velik kot "Sprejmi vse" —
   nikoli manjši ali svetlejši. ──────────────────────────────────── */
@media (max-width:720px){
  .zs-pasica{ padding-left:12px; padding-right:12px; }
  .zs-pasica-okvir{
    flex-direction:column; align-items:stretch; gap:16px;
    padding:20px 18px; border-radius:var(--r);
    max-height:min(82vh, 640px); overflow-y:auto;
  }
  .zs-gumbi{ flex-direction:column; align-items:stretch; gap:8px; }
  .zs-gumb--glavni{ width:100%; min-width:0; padding:14px 20px; }
  .zs-gumb--vez{ padding:6px; }
  .zs-okno{ max-height:calc(100vh - 24px); border-radius:var(--r-lg); }
  .zs-okno-noga{ flex-direction:column-reverse; }
  .zs-okno-noga .zs-gumb--glavni{ width:100%; }
  .zs-vrstica-vrh{ flex-wrap:wrap; }
}

/* ── manj gibanja ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .zs-pasica, .zs-plast, .zs-okno{ transition:none; }
  .zs-pasica{ transform:none; }
}

/* ── tisk ─────────────────────────────────────────────────────────── */
@media print{
  .zs-pasica, .zs-plast{ display:none !important; }
}