/*
 * Cookie / consent banner — SD-23
 * Figma: Cookie Banner (node 6365-123222)
 * First-party DSGVO consent banner, fixed to the bottom of the viewport.
 */

.dk-cookie-banner {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 200;
  background-color: var(--dk-color-black);
  color: var(--dk-color-white);
  padding: var(--dk-space-05) var(--dk-space-06);
  padding-block-end: calc(var(--dk-space-05) + env(safe-area-inset-bottom, 0px));
}

.dk-cookie-banner[hidden] {
  display: none;
}

.dk-cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dk-space-05);
  max-inline-size: 72rem;
  margin-inline: auto;
}

.dk-cookie-banner__text {
  flex: 1 1 20rem;
  margin: 0;
}

.dk-cookie-banner__link {
  color: var(--dk-color-white);
  text-underline-offset: 0.15em;
}

.dk-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--dk-space-04);
  flex: 0 0 auto;
}

.dk-cookie-banner__btn--decline {
  min-block-size: 2.75rem;
  padding-block: 0.625rem;
  padding-inline: var(--dk-space-05);
  border: 1px solid var(--dk-color-white);
  border-radius: 999px;
  background: transparent;
  color: var(--dk-color-white);
  font-size: var(--dk-text-ui-m-size);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dk-cookie-banner__btn--decline:hover {
  background-color: var(--dk-color-brand-secondary-01);
  border-color: var(--dk-color-black);
  color: var(--dk-color-black);
}

.dk-cookie-banner__btn--decline:focus-visible,
.dk-cookie-banner [data-cookie-accept]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dk-color-black), 0 0 0 4px var(--dk-color-white), 0 0 0 6px var(--dk-color-focus);
}