/* ==========================================================================
   Kakrutan, valpanelen och kakdeklarationen (inc/kakor.php)

   Två regler i den här filen är juridiska och inte estetiska:

     1. .ut-kakor__knapp får inte grenas ut i en "primär" och en "sekundär"
        variant. Godkänn och avvisa ska se likadana ut. Ett godkänn i korall
        bredvid ett avvisa i grått är precis den nudgning som gör samtycket
        ogiltigt.
     2. Rutan täcker inte sidan och har ingen mörkläggning bakom sig. Sidan
        ska gå att läsa och använda medan valet står obesvarat.

   Färgvalet: blå #2559A7 mot vitt ger 6,4:1 och klarar WCAG AA för brödtext.
   Korall #E0764F ger 2,9:1 mot vitt och används därför inte till knapptext
   här, till skillnad från sidans övriga knappar där texten är stor och fet.
   ========================================================================== */

.ut-kakor__ruta {
  position: fixed;
  z-index: 900;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #FFFFFF;
  border: 1px solid var(--ut-border);
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(15, 38, 71, .16);
  font-family: var(--font-body);
  color: var(--ut-text);
}

.ut-kakor__ruta[hidden] { display: none; }

.ut-kakor__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ut-kakor__text { flex: 1; min-width: 0; }

.ut-kakor__rubrik {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--ut-blue-dark);
  margin: 0 0 6px;
}

.ut-kakor__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.ut-kakor__lank { margin-top: 8px !important; font-size: 14px !important; }
.ut-kakor__lank a { color: var(--ut-blue-primary); }

.ut-kakor__knappar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Godkänn och avvisa: samma klass, alltså samma vikt. Se filhuvudet. */
.ut-kakor__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16.25px;
  line-height: 1.2;
  white-space: nowrap;
  padding: 11px 20px;
  border: 1.5px solid var(--ut-blue-primary);
  border-radius: 8px;
  background: var(--ut-blue-primary);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.ut-kakor__knapp:hover { background: #1e4a8f; border-color: #1e4a8f; }

/* "Anpassa" är ett tredje steg, inte ett svagare nej. */
.ut-kakor__knapp--text {
  background: transparent;
  border-color: transparent;
  color: var(--ut-blue-primary);
  text-decoration: underline;
  padding-left: 8px;
  padding-right: 8px;
}

.ut-kakor__knapp--text:hover { background: var(--ut-bg-hero); border-color: transparent; color: var(--ut-blue-dark); }

.ut-kakor__knapp:focus-visible,
.ut-kakor__stang:focus-visible,
.ut-kakor__vippa input:focus-visible + .ut-kakor__vippa-yta {
  outline: 3px solid var(--ut-coral);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Valpanelen
   -------------------------------------------------------------------------- */

.ut-kakor__overlagg {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(15, 38, 71, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ut-kakor__overlagg[hidden] { display: none; }

body.ut-kakor-last { overflow: hidden; }

.ut-kakor__panel {
  background: #FFFFFF;
  border-radius: 12px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ut-text);
}

.ut-kakor__panelhuvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--ut-divider);
}

.ut-kakor__panelhuvud h2 {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--ut-blue-dark);
  margin: 0;
}

.ut-kakor__stang {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ut-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.ut-kakor__stang:hover { color: var(--ut-blue-dark); background: var(--ut-bg-hero); }

.ut-kakor__panelkropp { padding: 8px 24px 16px; overflow-y: auto; }

.ut-kakor__kategori { padding: 16px 0; border-bottom: 1px solid var(--ut-divider); }
.ut-kakor__kategori:last-child { border-bottom: none; }

.ut-kakor__kategorirad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ut-kakor__kategorinamn {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--ut-blue-dark);
}

.ut-kakor__kategoritext {
  margin: 8px 0 0 56px;
  font-size: 14.5px;
  line-height: 1.55;
}

.ut-kakor__alltid {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ut-text-muted);
  white-space: nowrap;
}

/* Vippan är en riktig kryssruta under ytan, så att tangentbord och
   skärmläsare får ett vanligt kryssrutebeteende utan extra aria-lappning. */
.ut-kakor__vippa {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.ut-kakor__vippa input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ut-kakor__vippa-yta {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #C3CEDD;
  transition: background-color .15s ease;
}

.ut-kakor__vippa-yta::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform .15s ease;
}

.ut-kakor__vippa input:checked + .ut-kakor__vippa-yta { background: var(--ut-blue-primary); }
.ut-kakor__vippa input:checked + .ut-kakor__vippa-yta::after { transform: translateX(18px); }

.ut-kakor__vippa input:disabled + .ut-kakor__vippa-yta { background: #9FB2C9; }
.ut-kakor__vippa input:disabled ~ .ut-kakor__kategorinamn { color: var(--ut-blue-dark); }
.ut-kakor__vippa:has(input:disabled) { cursor: default; }

.ut-kakor__panelfot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--ut-divider);
}

/* --------------------------------------------------------------------------
   Sidfotens väg tillbaka till valet
   -------------------------------------------------------------------------- */

.ut-footer__kakor {
  background: none;
  border: none;
  padding: 0;
  margin-left: 14px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.ut-footer__kakor:hover { color: #FFFFFF; }
.ut-footer__kakor:focus-visible { outline: 2px solid var(--ut-coral); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Kakdeklarationen [ut_kakdeklaration]
   -------------------------------------------------------------------------- */

.ut-kakdeklaration__forstapart {
  background: var(--ut-bg-box);
  border-left: 3px solid var(--ut-blue-primary);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}

.ut-kakdeklaration__uppdaterad { font-size: 13.5px; color: var(--ut-text-muted); }

.ut-kakdeklaration__tom {
  background: var(--ut-green-bg);
  border-left: 3px solid var(--ut-green);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}

/* Tabellen får scrolla för sig själv i stället för att tvinga hela sidan
   i sidled på en telefon. */
.ut-kakdeklaration__tabellyta { overflow-x: auto; margin: 12px 0 28px; }

.ut-kakdeklaration__tabell {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14.5px;
}

/* Posterna som bara gäller inloggade. Hopfällda för den som läser
   webbplatsen, utfällda för den som är inloggad, men aldrig borttagna:
   den som funderar på att logga in ska kunna läsa vad det innebär först. */
.ut-kakdeklaration__inloggad {
  border: 1px solid var(--ut-border);
  border-radius: 8px;
  margin: 0 0 28px;
  background: var(--ut-bg-box);
}

.ut-kakdeklaration__inloggad > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ut-blue-dark);
}

.ut-kakdeklaration__inloggad > summary:hover { color: var(--ut-blue-primary); }
.ut-kakdeklaration__inloggad > summary:focus-visible { outline: 3px solid var(--ut-coral); outline-offset: -3px; }
.ut-kakdeklaration__inloggad[open] > summary { border-bottom: 1px solid var(--ut-border); }

.ut-kakdeklaration__inloggadtext { margin: 14px 16px 0; font-size: 14.5px; }

.ut-kakdeklaration__inloggad .ut-kakdeklaration__tabellyta { margin: 14px 16px 16px; }
.ut-kakdeklaration__inloggad .ut-kakdeklaration__tabell { background: #FFFFFF; }

/* Kakornas namn får aldrig brytas mitt i ordet: "wordpress_test_cook / ie"
   ser ut som ett stavfel och går inte att söka efter. Tabellytan runt om
   scrollar i stället i sidled på små skärmar. Avsändarkolumnen finns bara
   när någon tredje part står i registret, och pekas därför ut med klass i
   stället för med nth-child. */
.ut-kakdeklaration__tabell td:first-child,
.ut-kakdeklaration__avsandare { white-space: nowrap; }

.ut-kakdeklaration__tabell th,
.ut-kakdeklaration__tabell td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ut-divider);
}

.ut-kakdeklaration__tabell th {
  font-family: var(--font-head);
  color: var(--ut-blue-dark);
  background: var(--ut-bg-box);
  border-bottom: 1px solid var(--ut-border);
}

.ut-kakdeklaration__tabell code {
  font-size: 13px;
  color: var(--ut-blue-dark);
}

.ut-kakdeklaration__typ,
.ut-kakdeklaration__nar {
  display: block;
  font-size: 12.5px;
  color: var(--ut-text-muted);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Mindre skärmar
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .ut-kakor__inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 20px; }
  .ut-kakor__knappar { flex-wrap: wrap; }
  .ut-kakor__knapp { flex: 1 1 auto; }
  .ut-kakor__knapp--text { flex-basis: 100%; }
  .ut-kakor__ruta { left: 10px; right: 10px; bottom: 10px; max-height: 80vh; overflow-y: auto; }
  .ut-kakor__panelfot .ut-kakor__knapp { flex: 1 1 100%; }
  .ut-kakor__kategoritext { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ut-kakor__knapp,
  .ut-kakor__vippa-yta,
  .ut-kakor__vippa-yta::after { transition: none; }
}