/* Kaksamtycke – Selvana-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;
}

/* Policylänken står inne i texten, inte på en egen rad under knapparna.
   Raden gjorde att rutan täckte 68 % av en 320 px telefon (tserab,
   20 okt 2026). nowrap håller länktexten ihop så att den inte bryts mitt i. */
.fk__text a {
  color: var(--fk-lank);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

@media (max-width: 47.99em) {
  .fk__inner {
    flex-direction: column;
    align-items: stretch;
    padding: .8rem 1rem;
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
    gap: .7rem;
  }
  .fk__text { max-width: none; font-size: .9rem; line-height: 1.45; }
  .fk__rubrik { font-size: 1rem; margin-bottom: .2rem; }

  /* flex-basis byter axel när behållaren staplar: 22rem blir en HÖJD, och
     listen fick ett tomrum på över 300 px mellan texten och knapparna.
     Hittat på tserab 20 sep 2026. */
  .fk__texter { flex: 0 0 auto; }

  /* Knapparna sida vid sida i lika stora delar (20 okt 2026). Staplade i
     full bredd tog rutan 40–68 % av skärmen; nu 23–37 %. Lika stora med
     flit: att säga nej ska vara precis lika lätt som att säga ja.

     Grid och inte flex: med flex: 1 1 0 räknade Chrome radens höjd som om
     texten bröts på två rader, och knapparna blev 54 px i stället för 44
     även där texten fick plats (uppmätt på discocchi 20 okt 2026).
     grid-auto-flow: column ger en kolumn per knapp, så en tredje knapp
     (Neka, se SKILL.md) hamnar bredvid de andra och blir lika stor. */
  .fk__actions {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .fk__actions .fk-btn { padding: .6rem .5rem; }
}

/* Riktigt smal telefon (320 px): rubriken tas bort, texten säger samma sak. */
@media (max-width: 23.99em) {
  .fk__rubrik { display: none; }
  .fk__text { font-size: .875rem; line-height: 1.4; }
}

/* ============================================================
   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; }