.kelis-consent {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  color: var(--kelis-consent-text, #f5f7f8);
  background: rgb(0 0 0 / 62%);
  backdrop-filter: blur(5px);
}

.kelis-consent--top { align-items: flex-start; }
.kelis-consent[hidden] { display: none; }
.kelis-consent [hidden] { display: none; }

.kelis-consent__panel {
  width: min(980px, 100%);
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid color-mix(in srgb, var(--kelis-consent-accent, #f0a500) 42%, transparent);
  border-radius: 14px;
  background: var(--kelis-consent-bg, #07151d);
  box-shadow: 0 20px 70px rgb(0 0 0 / 55%);
}

.kelis-consent__title { margin: 0 0 10px; color: var(--kelis-consent-accent, #f0a500); }
.kelis-consent__message { max-width: 75ch; margin: 0 0 20px; }
.kelis-consent__categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kelis-consent__category { position: relative; display: block; padding: 16px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 9px; background: rgb(255 255 255 / 4%); }
.kelis-consent__category p { margin: 7px 0 0; opacity: .82; }
.kelis-consent__category--choice { display: grid; grid-template-columns: auto 1fr; gap: 12px; cursor: pointer; }
.kelis-consent__category input { width: 20px; height: 20px; accent-color: var(--kelis-consent-accent, #f0a500); }
.kelis-consent__always { float: right; color: var(--kelis-consent-accent, #f0a500); font-size: .78rem; text-transform: uppercase; }
.kelis-consent__privacy { display: inline-block; margin-bottom: 18px; color: var(--kelis-consent-accent, #f0a500); }
.kelis-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kelis-consent__button, .kelis-consent-reopen { padding: 11px 17px; border: 1px solid var(--kelis-consent-accent, #f0a500); border-radius: 6px; color: var(--kelis-consent-text, #fff); background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.kelis-consent__button--primary { color: #101820; background: var(--kelis-consent-accent, #f0a500); }
.kelis-consent-reopen { position: fixed; right: 14px; bottom: 14px; z-index: 99990; padding: 8px 12px; color: #101820; background: #f0a500; font-size: .78rem; }

@media (max-width: 680px) {
  .kelis-consent { padding: 8px; }
  .kelis-consent__panel { padding: 20px 16px; border-radius: 10px; }
  .kelis-consent__categories { grid-template-columns: 1fr; }
  .kelis-consent__actions { display: grid; }
  .kelis-consent__button { width: 100%; }
}