.site-cookie-banner {
  position: fixed;
  z-index: 999;
  bottom: 1rem;
  left: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  width: min(23rem, calc(100vw - 2rem));
  padding: .875rem 1rem;
  border: 1px solid rgb(210 0 104 / 42%);
  border-radius: .75rem;
  background: #282828;
  color: #cccccc;
  box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
  font-size: .875rem;
  line-height: 1.35rem;
}

html.age-gate-open .site-cookie-banner {
  display: none !important;
}

.site-cookie-banner__text {
  min-width: 0;
}

.site-cookie-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.site-cookie-banner__actions button {
  min-height: 2.5rem;
  padding: .4rem .9rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.site-cookie-banner__accept {
  background: #d20068;
  color: #fff;
}

.site-cookie-banner__accept:hover {
  background: #eb197e;
}

.site-cookie-banner__reject {
  border-color: rgb(255 255 255 / 22%) !important;
  background: transparent;
  color: #cccccc;
}

.site-cookie-banner__reject:hover {
  border-color: #d20068 !important;
  color: #fff;
}

.site-cookie-banner__actions button:focus-visible {
  outline: 2px solid #ff66ad;
  outline-offset: 3px;
}

@media (max-width: 22rem) {
  .site-cookie-banner {
    bottom: .625rem;
    left: .625rem;
    width: calc(100vw - 1.25rem);
    padding: .75rem;
  }
}
