/* Cookierutan.

   En låg remsa i nattens material längs underkanten, inte ett vitt kort som
   flyter över hjälten. En sajt som blockerar innehållet tills man klickat
   känns inte premium — och ett vitt kort mitt över det mörka öppningsfotot
   var precis det. Remsan är låg, hel i bredd och försvinner efter svaret.

   Färgerna är nattens egna tokens PÅ nattens egen botten. Förra varianten
   satte --ljus och --ljus-2 på vit yta — texten var i praktiken osynlig,
   samma bugg som en gång gjorde produktraderna oläsliga fast åt andra hållet. */

.samtycke{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:var(--natt-2);color:var(--ljus);
  border-top:1px solid var(--natt-linje);
  padding:20px clamp(16px,3vw,44px) max(20px,env(safe-area-inset-bottom,20px));
  opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--kurva),transform .45s var(--kurva);
}
.samtycke.uppe{opacity:1;transform:none}

.samtycke-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 44px;
  width:min(100%,var(--wrap));margin-inline:auto;
}
.samtycke-txt{flex:1 1 420px;max-width:70ch}
.samtycke h2{font-size:20px;margin-bottom:6px;color:var(--ljus)}
.samtycke p{margin:0;font-size:14px;line-height:1.55;color:var(--ljus-2)}
/* TRÄFFYTAN. Länken mätte 104×17 px och var den enda ytan under fyrtiofyra på
   hela sajten — och den sitter i en remsa där de två knapparna bredvid är
   fyrtiosex. Utfyllnaden är lodrät och på ett INLINE-element, alltså räknas
   den inte in i radhöjden: stycket ser exakt likadant ut, men fingret får
   fyrtiofem bildpunkter att sikta på i stället för sjutton. Samma grepp som
   märket i sidhuvudet och brödsmulorna redan använder. */
.samtycke a{color:var(--ljus);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--guld);padding-block:14px}

/* Nej och ja väger lika mycket. Att göra "nej" till en grå textlänk är den
   vanligaste fulheten på svenska sajter — och den är dessutom olaglig. */
.samtycke-knappar{display:flex;gap:10px;flex:0 0 auto;margin-left:auto}
.samtycke-knappar .btn{padding:12px 24px;font-size:15px;min-height:46px}

/* Knapparna speglas som i de mörka sektionerna: ljus fylld och tom med
   hårstreck. Grundknappen är svart på ljust och försvinner mot natten. */
.samtycke .btn{background:var(--ljus);color:var(--natt);border-color:var(--ljus)}
.samtycke .btn::before{background:var(--guld)}
.samtycke .btn.tom{background:transparent;color:var(--ljus);border-color:var(--natt-linje)}
@media (hover:hover){
  .samtycke .btn.tom:hover{color:var(--natt);border-color:var(--ljus)}
  .samtycke .btn.tom::before{background:var(--ljus)}
}

@media (max-width:640px){
  .samtycke-knappar{width:100%;margin-left:0}
  .samtycke-knappar .btn{flex:1}
}

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

/* Länken i sidfoten och i integritetstexten. */
[data-samtycke]{cursor:pointer}