/* ==========================================================================
   PRIVOLA ZA KOLAČIĆE — zajednički stil
   Učitavaju ga i glavni sajt (css/style.css) i oglasna stranica
   (kampanja/landing.css). Ta dva sustava nemaju nijedan zajednički token:
   glavni koristi --ink/--paper, kampanja --plava/--siva. Zato svaki var()
   ovdje nosi rezervnu vrijednost — pod oba se iscrtava ispravno, a ako
   stranica definira svoj token, on ima prednost.
   ========================================================================== */
/* ============================================================
   PRIVOLA ZA KOLAČIĆE
   Traka je odvojena kartica koja pluta nad sadržajem: ne lijepi se
   za dno i ne gura ništa gore, pa gumbi ispod nje ostaju na mjestu.
   [hidden] mora biti !important — pravila ispod postavljaju display
   i inače bi nadjačala atribut, pa bi nevidljivi prozor hvatao klikove.
   ============================================================ */
.pk-traka[hidden],
.pk-prozor[hidden]{ display:none !important; }

.pk-traka{
  position:fixed;
  left:50%;
  bottom: clamp(16px, 2.6vh, 30px);
  transform: translate(-50%, calc(100% + 40px));
  width: min(980px, calc(100% - 32px));
  z-index: 100000;
  background: var(--paper-2, #ffffff);
  border:1px solid var(--line, #e4e5df);
  border-radius:20px;
  box-shadow: 0 18px 50px rgba(13,27,42,.16);
  opacity:0;
  transition: transform .42s cubic-bezier(.22,.7,.3,1), opacity .42s ease;
}
.pk-traka.je-vidljiva{ transform: translate(-50%, 0); opacity:1; }

.pk-traka__unutra{
  display:flex; align-items:center; gap:28px;
  padding: 20px 24px;
}
.pk-traka__tekst{ flex:1 1 auto; min-width:0; }
.pk-traka__naslov{
  margin:0 0 6px; font-weight:700; font-size:1rem; color:var(--ink, #0d1b2a);
}
.pk-traka__opis{
  margin:0 0 8px; font-size:.9375rem; line-height:1.55; color:var(--ink-soft, #33414f);
}
.pk-traka__veze{ font-size:.875rem; color:var(--muted, #8a8f98); }
.pk-traka__veze a{ color:var(--ink-soft, #33414f); text-decoration:underline; }
.pk-traka__veze a:hover{ color:var(--accent, #2f7bff); }

.pk-traka__gumbi{
  display:flex; flex-direction:column; gap:8px;
  flex:0 0 auto; width:190px;
}

.pk-gumb{
  font:inherit; font-size:.9375rem; font-weight:600;
  padding:11px 18px; border-radius:11px;
  cursor:pointer; border:1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  width:100%;
}
.pk-gumb--pun{ background:var(--ink, #0d1b2a); color:var(--paper, #f7f7f4); }
.pk-gumb--pun:hover{ background:var(--accent, #2f7bff); }
.pk-gumb--prazan{ background:transparent; color:var(--ink-soft, #33414f); border-color:var(--line, #e4e5df); }
.pk-gumb--prazan:hover{ border-color:var(--accent, #2f7bff); color:var(--accent, #2f7bff); }
.pk-gumb:focus-visible{ outline:2px solid var(--accent, #2f7bff); outline-offset:2px; }

/* ---------------------------------------------------- drugi sloj: postavke */
.pk-prozor{
  position:fixed; inset:0; z-index:100001;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; transition:opacity .2s ease;
}
.pk-prozor.je-otvoren{ opacity:1; }
.pk-prozor__zastor{ position:absolute; inset:0; background:rgba(13,27,42,.45); }
.pk-prozor__ploca{
  position:relative;
  width:min(620px, 100%);
  max-height: min(86vh, 760px);
  display:flex; flex-direction:column;
  background:var(--paper-2, #ffffff);
  border:1px solid var(--line, #e4e5df); border-radius:18px;
  box-shadow:0 26px 70px rgba(13,27,42,.26);
  transform: translateY(10px);
  transition: transform .2s ease;
}
.pk-prozor.je-otvoren .pk-prozor__ploca{ transform:none; }

.pk-prozor__vrh{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 24px; border-bottom:1px solid var(--line, #e4e5df);
}
.pk-prozor__naslov{ margin:0; font-size:1.125rem; color:var(--ink, #0d1b2a); }
.pk-prozor__x{
  background:none; border:0; cursor:pointer;
  font-size:1.75rem; line-height:1; color:var(--muted, #8a8f98); padding:0 4px;
}
.pk-prozor__x:hover{ color:var(--ink, #0d1b2a); }

.pk-prozor__tijelo{ padding:8px 24px 4px; overflow-y:auto; }
.pk-vrsta{ padding:18px 0; border-bottom:1px solid var(--line, #e4e5df); }
.pk-vrsta:last-child{ border-bottom:0; }
.pk-vrsta__vrh{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:8px;
}
.pk-vrsta__ime{ font-weight:700; color:var(--ink, #0d1b2a); }
.pk-vrsta__fiksno{ font-size:.8125rem; color:var(--muted, #8a8f98); }
.pk-vrsta__opis{ margin:0; font-size:.875rem; line-height:1.6; color:var(--ink-soft, #33414f); }
.pk-vrsta__opis code{
  background:var(--chrome-2, #ececea); padding:1px 5px; border-radius:5px;
  font-size:.8125em;
}

/* Sklopka. Odbijanje mora biti jednako lako kao pristanak, pa je početno
   stanje ISKLJUČENO i nema unaprijed kvačice. */
.pk-sklopka{ position:relative; flex:0 0 auto; cursor:pointer; }
.pk-sklopka input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.pk-sklopka__traka{
  display:block; width:46px; height:26px; border-radius:999px;
  background:var(--chrome-3, #e1e1e4); transition:background .18s ease;
}
.pk-sklopka__traka::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:var(--paper-2, #ffffff); box-shadow:0 1px 3px rgba(13,27,42,.3);
  transition:transform .18s ease;
}
.pk-sklopka input:checked + .pk-sklopka__traka{ background:var(--accent, #2f7bff); }
.pk-sklopka input:checked + .pk-sklopka__traka::after{ transform:translateX(20px); }
.pk-sklopka input:focus-visible + .pk-sklopka__traka{ outline:2px solid var(--accent, #2f7bff); outline-offset:2px; }

.pk-prozor__dno{
  display:flex; justify-content:flex-end; gap:10px;
  padding:18px 24px; border-top:1px solid var(--line, #e4e5df);
}
.pk-prozor__dno .pk-gumb{ width:auto; }

@media (max-width: 720px){
  .pk-traka__unutra{ flex-direction:column; align-items:stretch; gap:16px; }
  .pk-traka__gumbi{ width:100%; }
  .pk-prozor__dno{ flex-direction:column-reverse; }
  .pk-prozor__dno .pk-gumb{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .pk-traka, .pk-prozor, .pk-prozor__ploca{ transition:none; }
}