/* Piškotki · "otok" (Klaus, 29. 9. 2026 pozno; prenova po Tai-u "nadgradi dizajn").
   Isti material kot nav (steklo, rob --k12, radij 18, kapsula s krogom): nav zgoraj na sredini, otok spodaj na sredini.
   Levo znak obroča, ki se ob prihodu nariše (obroč, nato jedro). Ob "Sprejmi" se krog zapolni, otok se pogrezne.
   Žetoni strani: --bg, --k, --k6, --k12, --k24, --k48, --k72, --ink, --fd, --fm (obstajajo na vseh podstraneh).
   Senca in steklo imata lastne vrednosti, ker nekatere podstrani nimajo --osh/--inkr. Logika: /js/piskotki.js. */

.pk-banner{
  box-sizing:border-box;
  position:fixed;z-index:500;left:50%;bottom:18px;
  width:max-content;max-width:min(880px,calc(100vw - 32px));
  display:flex;align-items:center;gap:18px;
  padding:10px 10px 10px 16px;
  border-radius:18px;
  border:1px solid var(--k12);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);backdrop-filter:blur(24px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 28px 64px -26px rgba(10,10,10,.38),0 3px 12px -4px rgba(10,10,10,.12);
  font-family:var(--fd);color:var(--k72);
  opacity:0;transform:translate(-50%,22px) scale(.985);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.pk-banner *{box-sizing:border-box}
:root[data-theme=dark] .pk-banner{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(242,238,230,.07),0 30px 70px -28px rgba(0,0,0,.75),0 2px 12px -4px rgba(0,0,0,.4);
}
.pk-banner.pk-in{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.pk-banner.pk-out{opacity:0;transform:translate(-50%,14px) scale(.985);transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .36s cubic-bezier(.4,0,.2,1);pointer-events:none}
.pk-banner:focus{outline:none}
.pk-banner:focus-visible{outline:none} /* vsebnik dobi fokus programsko (bralniki zaslona); vidni obroč imajo gumbi */

/* znak: obroč + jedro (kot logotip); ob prihodu se obroč nariše, nato pride jedro */
.pk-lm{flex:none;width:26px;height:26px;color:var(--k);display:block}
.pk-lm .r{fill:none;stroke:currentColor;stroke-width:13;stroke-dasharray:239;stroke-dashoffset:239;transform:rotate(-90deg);transform-origin:50px 50px}
.pk-lm .c{fill:currentColor;transform:scale(0);transform-box:fill-box;transform-origin:center}
.pk-in .pk-lm .r{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .2s}
.pk-in .pk-lm .c{transform:scale(1);transition:transform .6s cubic-bezier(.16,1,.3,1) 1s}
.pk-ok .pk-lm .c{transform:scale(1.25);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.pk-out .pk-lm .r{stroke-dashoffset:0}                                  /* ob odhodu znak ostane narisan, otok zbledi v celoti */
.pk-out .pk-lm .c{transform:scale(1)}
.pk-out.pk-ok .pk-lm .c{transform:scale(1.25)}

.pk-text{margin:0;font-size:14.5px;line-height:1.42;color:var(--k72);max-width:43ch;text-wrap:pretty}
.pk-in .pk-text,.pk-in .pk-actions{animation:pk-up .6s cubic-bezier(.16,1,.3,1) both}
.pk-in .pk-actions{animation-delay:.08s}
@keyframes pk-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pk-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}

.pk-link{
  font-size:14.5px;color:var(--k72);padding:9px 14px;border-radius:10px;
  text-decoration:none;white-space:nowrap;transition:color .2s,background .2s;
}
.pk-link:hover{color:var(--k);background:var(--k6)}

.pk-btn{font-family:var(--fd);font-weight:600;font-size:15px;line-height:1;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;transition:opacity .2s,background .2s,border-color .2s,color .2s,transform .15s}
.pk-btn:active{transform:scale(.97)}

/* glavni gumb = kapsula kot "Pogovor" v navu; namesto puščice kljukica */
.pk-btn-primary{display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;letter-spacing:-.01em;background:var(--k);color:var(--ink)}
.pk-ic{width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);display:grid;place-items:center;color:var(--ink);transition:background .25s,color .25s,transform .25s}
.pk-ic svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pk-ic path{stroke-dasharray:16;stroke-dashoffset:0;transition:stroke-dashoffset .3s ease}
.pk-btn-primary:hover .pk-ic{background:var(--ink);color:var(--k);transform:scale(1.06)}
.pk-ok .pk-btn-primary .pk-ic{background:var(--ink);color:var(--k)}
.pk-ok .pk-btn-primary .pk-ic path{animation:pk-check .32s ease both}
@keyframes pk-check{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}

/* način "soglasje": več gumbov in nastavitve (vklopi se z window.LUPLY_PISKOTKI = {mode:'soglasje'}) */
.pk-btn-secondary{background:none;color:var(--k);border:1px solid var(--k24);padding:10px 16px}
.pk-btn-secondary:hover{border-color:var(--k)}
.pk-btn-text{background:none;padding:10px 12px;font-weight:500;font-size:14.5px;color:var(--k72);border-radius:10px}
.pk-btn-text:hover{color:var(--k);background:var(--k6)}
.pk-banner.pk-sog{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:14px;width:min(560px,calc(100vw - 32px));padding:16px}
.pk-sog .pk-actions{grid-column:1/-1;flex-wrap:wrap;margin-left:0}
.pk-sog .pk-link{margin-left:auto}
.pk-settings{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--k12);display:grid;gap:14px}
.pk-settings[hidden]{display:none}
.pk-cat{display:grid;gap:4px}
.pk-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pk-cat-head>span:first-child{font-size:14.5px;font-weight:600;color:var(--k)}
.pk-cat-note{margin:0;font-size:13px;line-height:1.42;color:var(--k48)}
.pk-toggle{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;min-width:98px;text-align:center;border:1px solid var(--k24);border-radius:999px;background:none;color:var(--k48);padding:5px 12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pk-toggle[aria-checked="true"]{background:var(--k);border-color:var(--k);color:var(--ink)}
.pk-toggle[aria-disabled="true"]{cursor:default;opacity:.7}
.pk-settings-shrani{justify-self:start;margin-top:2px}

.pk-btn:focus-visible,.pk-link:focus-visible,.pk-toggle:focus-visible{outline:1.5px solid var(--k);outline-offset:3px}

/* telefon: otok ob spodnjem robu z odmikom, znak + besedilo v prvi vrsti, gumba v drugi */
@media (max-width:640px){
  .pk-banner{
    left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:auto;max-width:none;
    display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:12px;align-items:start;
    padding:14px 12px 12px 14px;
    transform:translateY(22px) scale(.985);
  }
  .pk-banner.pk-in{transform:none}
  .pk-banner.pk-out{transform:translateY(14px) scale(.985)}
  .pk-banner.pk-sog{width:auto}
  .pk-lm{width:22px;height:22px;margin-top:1px}
  .pk-text{font-size:14px;max-width:none}
  .pk-actions{grid-column:1/-1;justify-content:space-between;margin-left:0}
  .pk-link{padding:9px 4px}
}

@media (prefers-reduced-motion:reduce){
  .pk-banner,.pk-banner.pk-in,.pk-banner.pk-out{transition:opacity .15s linear;transform:translate(-50%,0)}
  .pk-in .pk-text,.pk-in .pk-actions{animation:none}
  .pk-lm .r{stroke-dashoffset:0;transition:none!important}
  .pk-lm .c{transform:none;transition:none!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .pk-banner,.pk-banner.pk-in,.pk-banner.pk-out{transform:none}
}