/* TSA Cookies — in de stijl van thesleepingagency.com (navy #002134 + geel #F9ED1A, Poppins). */
/* Bewust GEEN @import van Google Fonts: dat is een verzoek naar een derde
   partij, en het is nogal wrang als juist de cookiebanner dat doet vóórdat de
   bezoeker iets heeft mogen kiezen. De site laadt Poppins zelf al; staat dat er
   niet, dan valt de stack hieronder netjes terug op het systeemlettertype. */

/* Verbergen moet winnen. Een class-regel als `.tsa-ck-cats { display: block }`
   verslaat het ingebouwde `[hidden] { display: none }` van de browser, en dan
   staat de banner er altijd — ook als er allang een keuze is gemaakt. */
.tsa-ck[hidden],
.tsa-ck [hidden] { display: none !important; }

/* Een WordPress-thema stylet vaak élke knop en elk invoerveld op de pagina.
   Deze paar regels houden de banner daar buiten. */
.tsa-ck, .tsa-ck *, .tsa-ck *::before, .tsa-ck *::after { box-sizing: border-box; }
.tsa-ck button, .tsa-ck input {
  margin: 0; min-height: 0; min-width: 0; max-width: none;
  letter-spacing: normal; text-transform: none; font-family: inherit;
}

.tsa-ck {
  --navy: #002134;
  --navy-2: #0e3450;
  /* Exact het geel van thesleepingagency.com. De hub gebruikt intern #F8E801;
     deze banner staat op de site zelf, dus die volgt de site. */
  --geel: #F9ED1A;
  --ink: #eaf1f7;
  --gedempt: #9db4c7;

  position: fixed;
  /* Rechts blijft 96px vrij: daar zit de chatbubbel (56px + 20px marge). Die
     staat op z-index 2147483000 en zou anders bovenop de banner komen te
     hangen. Wij gaan er netjes onder én ernaast zitten. */
  left: 20px; right: 96px; bottom: 20px;
  z-index: 2147482000;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
}

.tsa-ck-kaart {
  background: var(--navy);
  color: var(--ink);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 24px 60px rgba(0, 33, 52, .45);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: tsa-ck-op .18s ease;
}
@keyframes tsa-ck-op { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tsa-ck-kaart { animation: none; }
}

.tsa-ck-titel {
  margin: 0 0 6px; padding: 0;
  font-size: 17px; font-weight: 600; color: #fff;
}
.tsa-ck-titel:focus { outline: none; }
.tsa-ck-titel:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; border-radius: 4px; }

.tsa-ck-tekst { margin: 0; font-size: 14px; color: var(--ink); max-width: 78ch; }
.tsa-ck-privacy { color: var(--geel); text-decoration: underline; }

/* Knoppen */
.tsa-ck-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.tsa-ck-knop {
  border: 2px solid transparent; border-radius: 999px;
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
/* Accepteren en weigeren zijn even groot en even zichtbaar; weigeren mag niet
   moeilijker te vinden zijn dan accepteren. */
.tsa-ck-knop-geel { background: var(--geel); color: var(--navy); }
.tsa-ck-knop-geel:hover { filter: brightness(.95); }
.tsa-ck-knop-lijn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.tsa-ck-knop-lijn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.tsa-ck-meer {
  border: 0; background: none; padding: 6px 2px;
  font-size: 14px; color: var(--geel); text-decoration: underline; cursor: pointer;
}

/* Focus moet je zien; toetsenbord is hier de enige andere manier om te kiezen. */
.tsa-ck :focus-visible { outline: 3px solid var(--geel); outline-offset: 2px; }
.tsa-ck .tsa-ck-knop-geel:focus-visible { outline-color: #fff; }

/* Per categorie kiezen */
.tsa-ck-cats {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; gap: 12px;
}
.tsa-ck-cat-kop {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: #fff; cursor: pointer;
}
.tsa-ck-cat-kop input {
  width: 17px; height: 17px; accent-color: var(--geel); cursor: pointer;
}
.tsa-ck-cat-kop input:disabled { cursor: default; opacity: .65; }
.tsa-ck-cat-kop em {
  font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--navy); background: var(--geel);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.tsa-ck-cat-uitleg { margin: 4px 0 0 26px; font-size: 13px; color: var(--gedempt); max-width: 70ch; }
.tsa-ck-bewaar { justify-self: start; }

/* De "Cookievoorkeuren"-link (shortcode). Een knop, want hij navigeert niet —
   hij opent de banner. Hij erft de kleur van de footer waar hij in staat. */
.tsa-ck-link {
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}

@media (max-width: 640px) {
  .tsa-ck {
    left: 12px; right: 12px;
    /* Boven de chatbubbel (12px marge + 56px bubbel + 16px lucht) in plaats van
       ernaast: naast elkaar past niet op een telefoon. */
    bottom: 84px;
  }
  .tsa-ck-kaart { padding: 16px; max-height: calc(100dvh - 100px); }
  .tsa-ck-knoppen { gap: 8px; }
  /* Allebei de knoppen over de volle breedte, zodat ze even groot blijven. */
  .tsa-ck-knop { flex: 1 1 100%; }
  .tsa-ck-meer { flex: 1 1 100%; text-align: left; }
}