.consent-banner {
  position: fixed;
  z-index: 10000;
  right: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  max-width: 72rem;
  margin: auto;
  padding: 1.25rem 1.5rem;
  color: #fff;
  background: #122239;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
}

.consent-banner[hidden] { display: none; }
.consent-banner h2 { margin: 0 0 .4rem; color: inherit; font-size: 1.15rem; }
.consent-banner p { margin: 0; max-width: 54rem; line-height: 1.5; }
.consent-actions { display: flex; gap: .65rem; }
.consent-actions button,
.privacy-settings {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .7rem 1rem;
  font: inherit;
  cursor: pointer;
}
.consent-actions button { color: #fff; background: transparent; white-space: nowrap; }
.consent-actions .consent-accept { color: #122239; background: #fff; }
.privacy-settings {
  position: fixed;
  z-index: 9999;
  right: .75rem;
  bottom: .75rem;
  padding: .45rem .7rem;
  color: #fff;
  background: #122239;
  font-size: .75rem;
  opacity: .82;
}
.consent-actions button:focus-visible,
.privacy-settings:focus-visible { outline: 3px solid #8fc7ff; outline-offset: 3px; }

@media (max-width: 700px) {
  .consent-banner {
    grid-template-columns: 1fr;
    gap: 1rem;
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    padding: 1rem;
  }
  .consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .consent-actions button { width: 100%; }
  .privacy-settings { bottom: 4.5rem; }
}