/* =========================================================================
   consent.css — pristanak za kolačiće (uz consent.js)

   Izgled i animacija preneseni su iz predloška „cookie-consent" (React +
   framer-motion + shadcn/ui). Original traži React build; ovdje je prenesen
   OBLIK i POKRET, ne kod:
     · kompaktna kartica dolje lijevo (ne traka preko cijele širine)
     · ikona kolačića u obojenom kvadratu + naslov
     · poveznica sa strelicom koja klizne udesno na hover
     · odvojena traka s dugmadima na tamnijoj podlozi
     · ulaz: opacity 0 → 1 uz pomak od 100px odozdo, 0.4s ease-out
     · modal: zatamnjenje + zoom 95% → 100%
     · kartice kategorija ulaze jedna za drugom (delay index · 0.05s)
     · uključena kategorija dobija obojeni okvir i podlogu
   Boje su iz palete stranice (navy / zlatna), ne iz shadcn tokena.
   ========================================================================= */

/* ---------- kartica dolje lijevo ---------- */
.dpk-ck{
  position:fixed;z-index:1200;
  left:0;right:0;bottom:0;
  padding:12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
@media(min-width:640px){
  .dpk-ck{left:16px;right:auto;bottom:16px;padding:0;max-width:26rem;width:calc(100vw - 32px)}
}

.dpk-ck-card{
  pointer-events:auto;
  background:rgba(11,31,51,.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(250,251,252,.14);
  border-radius:14px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.85);
  color:#FAFBFC;font-family:Barlow,Helvetica,Arial,sans-serif;
  overflow:hidden;
  /* ulazna animacija iz predloška: y:100 → 0 uz fade, 0.4s ease-out */
  opacity:0;transform:translateY(100px);
  transition:opacity .4s ease-out,transform .4s ease-out;
}
.dpk-ck.is-on .dpk-ck-card{opacity:1;transform:translateY(0)}

.dpk-ck-top{display:flex;align-items:center;gap:12px;padding:22px 22px 14px}
.dpk-ck-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;background:rgba(201,162,39,.14);color:var(--gold,#C9A227)}
.dpk-ck-top h2{margin:0;font-family:Jost,sans-serif;font-weight:400;font-size:17px;letter-spacing:-.01em}

.dpk-ck-body{padding:0 22px 16px}
.dpk-ck-body p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:rgba(250,251,252,.7)}
.dpk-ck-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.dpk-ck-link{
  display:inline-flex;align-items:center;gap:4px;
  font:inherit;font-size:12px;font-weight:500;
  color:var(--gold,#C9A227);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:none;transition:color .2s ease;
}
.dpk-ck-link svg{transition:transform .2s ease}
@media(hover:hover){
  .dpk-ck-link:hover{text-decoration:underline;text-underline-offset:3px}
  .dpk-ck-link:hover svg{transform:translateX(2px)}
}

/* traka s dugmadima — odvojena linijom i tamnijom podlogom, kao u predlošku */
.dpk-ck-actions{
  display:flex;flex-wrap:wrap;gap:10px;padding:14px;
  border-top:1px solid rgba(250,251,252,.12);
  background:rgba(250,251,252,.04);
}
/* Na telefonu se NE slaže sve u stupac: tri dugmeta po 46px + tekst prerastu
   ekran od 812px i kartica ispadne ispod ruba. Zato i ovdje ostaje raspored
   „dva u redu + Izaberi preko cijele širine" — kratki natpisi stanu bez lomljenja. */
@media(max-width:639px){
  .dpk-ck-body p{margin-bottom:12px}
  .dpk-ck-top{padding-top:18px}
}

.dpk-ck-b{
  flex:1 1 0;min-width:0;
  padding:11px 18px;border-radius:9px;
  border:1px solid rgba(250,251,252,.26);
  background:transparent;color:#FAFBFC;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease,color .2s ease,
             box-shadow .2s ease,transform .14s cubic-bezier(.34,1.56,.64,1);
}
@media(hover:hover){.dpk-ck-b:hover{border-color:var(--gold,#C9A227);color:var(--gold,#C9A227);box-shadow:0 8px 20px -12px rgba(0,0,0,.9)}}
.dpk-ck-b:active{transform:scale(.98)}
/* „Prihvati" i „Odbij" ostaju jednako istaknuti — predložak ima samo
   „Accept All", ali sakriveno odbijanje je upravo ono što se u praksi
   kažnjava, pa oba stoje u istoj traci i iste su veličine. */
/* „Izaberi" ide u vlastiti red preko cijele širine — tri dugmeta jedno uz
   drugo u kartici od 416px bila bi pretijesna i lomila bi natpise. */
.dpk-ck-b.is-wide{flex:1 0 100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dpk-ck-slider{display:inline-flex;opacity:.7}
.dpk-ck-b.is-primary{background:var(--gold,#C9A227);border-color:var(--gold,#C9A227);color:#0B1F33}
@media(hover:hover){.dpk-ck-b.is-primary:hover{background:#E0B72E;border-color:#E0B72E;color:#0B1F33;box-shadow:0 10px 24px -12px rgba(201,162,39,.9)}}
@media(pointer:coarse){.dpk-ck-b{min-height:46px}}

/* ---------- modal s postavkama ---------- */
.dpk-ck-ov{position:fixed;inset:0;z-index:1201;background:rgba(4,14,24,.8);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
.dpk-ck-ov.is-on{opacity:1;visibility:visible}

.dpk-ck-mod{
  position:fixed;left:50%;top:50%;z-index:1202;
  width:min(500px,94vw);max-height:min(88vh,780px);
  display:flex;flex-direction:column;
  background:rgba(11,31,51,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(250,251,252,.14);border-radius:16px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  color:#FAFBFC;font-family:Barlow,Helvetica,Arial,sans-serif;
  /* zoom-in-95 + fade, kao Dialog u predlošku */
  opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.95);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.dpk-ck-mod.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.dpk-ck-h{flex:none;padding:24px 24px 18px;border-bottom:1px solid rgba(250,251,252,.12);
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dpk-ck-h b{display:block;font-family:Jost,sans-serif;font-weight:300;font-size:21px;letter-spacing:-.015em}
.dpk-ck-h span{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:rgba(250,251,252,.62)}
.dpk-ck-x{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:none;
  border:1px solid rgba(250,251,252,.18);color:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  transition:background .2s ease,border-color .2s ease}
@media(hover:hover){.dpk-ck-x:hover{background:rgba(250,251,252,.08);border-color:rgba(250,251,252,.34)}}

.dpk-ck-body-m{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px;display:grid;gap:12px}

/* kartica kategorije — uključena dobija zlatni okvir i podlogu */
.dpk-ck-cat{
  border:1px solid rgba(250,251,252,.13);border-radius:12px;padding:16px;
  background:transparent;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
/* Mirno stanje je VIDLJIVO, a ulaz se animira iz skrivenog (`from` + `both`).
   Obrnuto — bazno opacity:0 pa animacija koja ga diže — znači da kartice
   ostanu nevidljive svuda gdje se animacija ne izvrši. */
.dpk-ck-mod.is-on .dpk-ck-cat{
  animation:dpk-ck-in .2s ease both;
  animation-delay:calc(var(--i,0) * .05s);   /* stagger iz predloška */
}
@keyframes dpk-ck-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dpk-ck-cat.is-on{border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.07);
  box-shadow:0 6px 18px -12px rgba(201,162,39,.7)}
@media(hover:hover){.dpk-ck-cat:not(.is-on):hover{border-color:rgba(250,251,252,.24)}}

.dpk-ck-cat-t{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dpk-ck-cat-l{display:flex;align-items:center;gap:11px;min-width:0}
.dpk-ck-cat-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;background:rgba(250,251,252,.07);color:rgba(250,251,252,.72);
  transition:background .2s ease,color .2s ease}
.dpk-ck-cat.is-on .dpk-ck-cat-ic{background:rgba(201,162,39,.16);color:var(--gold,#C9A227)}
.dpk-ck-cat-n{font-size:14.5px;font-weight:600;cursor:pointer}
.dpk-ck-lock{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.06em;
  background:rgba(201,162,39,.16);color:var(--gold,#C9A227);vertical-align:middle}
.dpk-ck-cat p{margin:12px 0 0;font-size:13px;line-height:1.55;color:rgba(250,251,252,.62)}

/* prekidač */
.dpk-ck-sw{position:relative;flex:0 0 auto;width:44px;height:25px;cursor:pointer}
.dpk-ck-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.dpk-ck-sw i{position:absolute;inset:0;border-radius:999px;background:rgba(250,251,252,.2);
  transition:background .22s ease;pointer-events:none}
.dpk-ck-sw i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#FAFBFC;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.dpk-ck-sw input:checked + i{background:var(--gold,#C9A227)}
.dpk-ck-sw input:checked + i::after{transform:translateX(19px);background:#0B1F33}
.dpk-ck-sw input:focus-visible + i{outline:2px solid var(--gold,#C9A227);outline-offset:3px}
.dpk-ck-sw.is-locked{opacity:.45;cursor:not-allowed}
.dpk-ck-sw.is-locked input{cursor:not-allowed}

.dpk-ck-foot{flex:none;display:flex;gap:10px;padding:18px 24px;
  border-top:1px solid rgba(250,251,252,.12);background:rgba(250,251,252,.04)}
@media(max-width:520px){.dpk-ck-foot{flex-direction:column-reverse}}

@media(prefers-reduced-motion:reduce){
  .dpk-ck-card,.dpk-ck-mod,.dpk-ck-ov,.dpk-ck-sw i,.dpk-ck-sw i::after,.dpk-ck-link svg{transition:none}
  .dpk-ck-card{transform:none}
  .dpk-ck-mod.is-on{transform:translate(-50%,-50%)}
  .dpk-ck-mod.is-on .dpk-ck-cat{animation:none;opacity:1;transform:none}
}

/* ================= DODIRNI UREĐAJI =================
   Meta je 44px. Dugmad „Prihvati/Odbij/Sačuvaj" su već 46px, ali sitni
   elementi oko njih (zatvaranje, poveznica na politiku, prekidači) ostali
   su na 14–32px, pa se na telefonu promašuju. Ne diramo izgled — samo
   plohu koja hvata prst. */
@media(pointer:coarse){
  /* Poveznica „Politika kolačića" je bila visoka 14px. Padding je dovoljan;
     inline-flex je nužan da bi visina uopće djelovala na <a>. */
  .dpk-ck-link{display:inline-flex;align-items:center;min-height:44px}
  .dpk-ck-links{gap:0 18px}

  /* Zatvaranje: vizualni kvadrat ostaje 32px, ploha raste na 44px preko
     ::after — inače bi dugme razmaknulo zaglavlje modala. */
  .dpk-ck-x{position:relative}
  .dpk-ck-x::after{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }

  /* Cijela kartica kategorije prima dodir, pa je prekidač od 25px u redu
     kao vizual — ali dodajemo mu istu plohu za slučaj izravnog pogotka. */
  .dpk-ck-sw{position:relative}
  .dpk-ck-sw::after{
    content:"";position:absolute;left:50%;top:50%;
    width:100%;height:44px;min-width:44px;transform:translate(-50%,-50%);
  }
}