/* Kaksamtycke – Framsida-mall
   ============================================================
   Egen fil, inte inline. style-src 'self' täcker den, så inget
   här kräver att CSP-hasharna räknas om.

   Färgerna hämtas från sajtens egna variabler med fallback, så
   filen tar kundens palett utan att ändras. Saknar sajten en
   variabel används reservvärdet.

   Prefixet .fk- finns för att inte krocka med sajtens klasser –
   tserab har till exempel redan en .cc-banner.
   ============================================================ */

.fk,
.fk-panel {
  --fk-yta:         var(--paper-card, #ffffff);
  --fk-kant:        var(--stone, #dfdcd5);
  --fk-text:        var(--ink, #1b1b1b);
  --fk-dampad:      var(--muted, #565656);
  --fk-primar:      var(--pine, #2f3b38);
  --fk-primar-text: #ffffff;
  --fk-lank:        var(--gold-text, #6f5518);

  /* Den sekundära knappen härleds ur textfärgen i stället för att hämtas
     från en av sajtens variabler. Skälet: tserabs --sand är guld (#E3B36B),
     och Inställningar blev då en accentknapp som drog mer blick än Godkänn.
     En tonad textfärg blir neutral på vilken palett som helst, ljus som mörk.
     Första raden är för webbläsare utan color-mix. */
  --fk-sekundar:    rgba(0, 0, 0, .05);
  --fk-sekundar:    color-mix(in srgb, var(--fk-text) 7%, transparent);
  --fk-radie:       .55rem;
}

/* ============================================================
   LAGER 1 – bottenlisten
   ============================================================ */

.fk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--fk-yta);
  color: var(--fk-text);
  border-top: 1.5px solid var(--fk-kant);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .14);
}
.fk[hidden] { display: none; }

.fk__inner {
  max-width: var(--maxw, 72rem);
  margin: 0 auto;
  padding: 1.1rem 1.2rem;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.fk__texter { flex: 1 1 22rem; min-width: 0; }

.fk__rubrik {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.fk__text {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--fk-dampad);
  max-width: 62ch;
}

.fk__actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 0 0 auto;
  min-width: 15rem;
}

/* Länkraden ligger under knapparna, som hos Bozetto. Centrerad på
   liten skärm, i linje med innehållet ovanför på stor. */
.fk__lankar {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: .7rem 1.2rem;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--fk-kant);
  font-size: .88rem;
}
.fk__lankar a {
  color: var(--fk-lank);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 48em) {
  .fk__lankar {
    justify-content: flex-start;
    padding-left: max(1.2rem, calc((100% - var(--maxw, 72rem)) / 2 + 1.2rem));
  }
}

@media (max-width: 47.99em) {
  .fk__inner { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .fk__actions { min-width: 0; }
  .fk__text { max-width: none; }

  /* flex-basis byter axel nar behallaren staplar: 22rem blir en HOJD, och
     listen fick ett tomrum pa over 300 px mellan texten och knapparna.
     Hittat pa tserab 20 sep 2026. */
  .fk__texter { flex: 0 0 auto; }
}

/* ============================================================
   KNAPPAR
   Neka alla och Godkänn alla delar klass med flit: samma
   storlek, samma färg, samma vikt. Ett samtycke räknas bara som
   frivilligt om det är precis lika lätt att säga nej som ja.
   ============================================================ */

.fk-btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .86rem;
  line-height: 1.2;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--fk-radie);
  cursor: pointer;
  text-align: center;
  transition: opacity .18s ease, background-color .18s ease;
}
.fk-btn:hover { opacity: .88; }
.fk-btn:focus-visible { outline: 3px solid var(--fk-lank); outline-offset: 2px; }

.fk-btn--primar {
  background: var(--fk-primar);
  color: var(--fk-primar-text);
}

.fk-btn--sekundar {
  background: var(--fk-sekundar);
  color: var(--fk-text);
  border-color: var(--fk-kant);
}

/* ============================================================
   LAGER 2 – inställningspanelen
   ============================================================ */

.fk-panel {
  margin: 0 auto 0 0;            /* fäst mot vänsterkanten, som Bozetto */
  width: min(34rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border: 0;
  padding: 0;
  background: var(--fk-yta);
  color: var(--fk-text);
  display: flex;
  flex-direction: column;
}
.fk-panel:not([open]) { display: none; }
.fk-panel::backdrop { background: rgba(0, 0, 0, .55); }

.fk-panel__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--fk-kant);
  flex: 0 0 auto;
}
.fk-panel__rubrik { margin: 0; font-size: 1.2rem; font-weight: 700; }

.fk-stang {
  font: inherit;
  background: var(--fk-sekundar);
  color: var(--fk-text);
  border: 1.5px solid var(--fk-kant);
  border-radius: var(--fk-radie);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.fk-stang:focus-visible { outline: 3px solid var(--fk-lank); outline-offset: 2px; }
.fk-stang svg { width: 20px; height: 20px; }

.fk-panel__kropp {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fk-panel__ingress {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--fk-dampad);
}

.fk-kort {
  border: 1px solid var(--fk-kant);
  border-radius: var(--fk-radie);
  padding: .95rem 1.05rem;
  background: var(--fk-yta);
}
.fk-kort[hidden] { display: none; }

.fk-kort__topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.fk-kort__rubrik { margin: 0; font-size: 1rem; font-weight: 700; }
.fk-kort__text {
  margin: .55rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--fk-dampad);
}

/* Utan den här regeln ärver länkar i panelen den dämpade textfärgen och
   slutar se ut som länkar – kontrollerat på tserab 20 sep 2026. */
.fk-panel__kropp a {
  color: var(--fk-lank);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hela ytan runt kryssrutan ska gå att träffa med tummen. */
.fk-vippa {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
  margin: -.6rem -.4rem -.6rem 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.fk-vippa input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--fk-primar);
  cursor: pointer;
}
.fk-vippa input:disabled { cursor: default; opacity: .55; }
.fk-vippa input:focus-visible { outline: 3px solid var(--fk-lank); outline-offset: 2px; }

.fk-panel__fot {
  flex: 0 0 auto;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 1rem 1.3rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--fk-kant);
  background: var(--fk-yta);
}
.fk-panel__fot .fk-btn { flex: 1 1 8rem; }
.fk-panel__fot .fk-btn--sekundar { flex: 1 1 100%; }
@media (min-width: 30em) {
  .fk-panel__fot .fk-btn--sekundar { flex: 1 1 8rem; }
}

/* Skärmläsartext som inte ska synas. */
.fk-dold {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .fk-panel[open] { animation: fk-in .22s ease-out; }
  .fk-panel[open]::backdrop { animation: fk-tona .22s ease-out; }
}
/* Förskjutningen är liten med flit. En panel som glider in hela sin
   bredd står utanför skärmen så länge animationen pågår – och fastnar
   den där (flik i bakgrunden, strypt rendering) går den inte att nå.
   Testet 20 sep 2026 gjorde precis det: panelen låg kvar på x = -523.
   Två centimeter räcker för känslan och kan aldrig gömma något. */
@keyframes fk-in {
  from { transform: translateX(-1.5rem); }
  to   { transform: translateX(0); }
}
@keyframes fk-tona {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Knappen "Cookie-inställningar" i footern ska se ut som länkarna
   runt den, inte som en knapp. */
[data-cookie-installningar] {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
[data-cookie-installningar][hidden] { display: none; }