#cookie-banner-container {
  font-family: "Gotham A", "Gotham B", "Trebuchet MS", "Lucida Grande", Tahoma,
    sans-serif;
  position: fixed;
  bottom: 0;
  width: 100%;

  /* This is excessive, but unfortunately there's a "messaging" popup with a z-index of 9999 in test. */
  z-index: 10000;
}

#cookie-banner-container #privacy-settings {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  border-radius: 0 4px 0 0;
}

#cookie-banner-container button {
  color: white;
  padding: 8px 16px;
  appearance: none;
  font-size: 16px;
  font-weight: 600;
  font-family: "Gotham A", "Gotham B", "Trebuchet MS", "Lucida Grande", Tahoma,
    sans-serif;
  background: #004a81;
  transition: ease all 0.1s;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

#cookie-banner-container button:hover {
  background: #003b68;
}

#cookie-banner-container .accept-all {
  background: #006e36;
}

#cookie-banner-container .accept-all:hover {
  background: #005529;
}

#cookie-banner-container #cookie-banner {
  background: white;
  border: 4px solid #5e1b6d;
  padding-block: 12px;
  padding-inline: 12px;
  line-height: 1.5;
  font-size: 16px;
  display: none;
}

#cookie-banner-container #consent-types {
  margin-block-start: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-start: 4px;
}

#cookie-banner-container .button-group {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding-block-start: 8px;
}

@media (max-width: 560px) {
  #cookie-banner-container .button-group {
    flex-direction: column;
  }
}

#cookie-banner-container .changes-saved {
  color: #009e4d;
  font-weight: 800;
  margin-left: auto;
  padding-inline: 4px;
  display: none;
}

#cookie-banner-container .changes-saved .spacer {
  width: 8px;
  display: inline-block;
}

#cookie-banner-container #learn-more {
  padding-block: 12px;
}

/* Override the *+* margin setting ("lobotomised owl") from body content. */
#cookie-banner-container * {
  margin: initial;
}

#cookie-banner-container p + p {
  margin-block: 8px;
}

/* Readability guideline of <80 chars: https://webtypography.net/2.1.2  */
#cookie-banner-container p {
  max-width: 80ch; /* Note: a ch is the width of a 0, so be generous here! */
}

#cookie-banner-container a {
  text-decoration: underline;
}

/* Don't show the chat button on top of the cookie banner. */
body:has(#cookie-banner-container[data-open="true"]) #genesys-messenger {
  /**
   * Leave the messenger in the DOM, but don't allow it to overlay our banner.
   * Source: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
   */
  isolation: isolate;
}