/*
 * Best Cookie Consent — front end. Built with Tailwind CSS (see tailwind.config.js).
 * Colours come from the settings as CSS variables on #bestcc.
 * Every text is at least 15px.
 */

.bestcc {
  --bestcc-bg: #f7f4ed;
  --bestcc-text: #151354;
  --bestcc-accent: #151354;
  --bestcc-accent-text: #fff;
  --bestcc-highlight: #e2333d;
  --bestcc-radius: 20px;
  --bestcc-btn-radius: 999px;
  --bestcc-fs: 16px;
  --bestcc-card: #fff;
  --bestcc-line: rgba(21, 19, 84, .14);
  --bestcc-shadow: 0 24px 60px -18px rgba(21, 19, 84, .45), 0 4px 14px rgba(21, 19, 84, .12);
  color: var(--bestcc-text);
  font-family: inherit;
  font-size: var(--bestcc-fs);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.bestcc *,
.bestcc *::before,
.bestcc *::after {
  box-sizing: border-box;
}

.bestcc [hidden] {
  display: none !important;
}

/* Text size options: never below 15px. */

.bestcc--fs-s {
  --bestcc-fs: 15px;
}

.bestcc--fs-l {
  --bestcc-fs: 18px;
}

/* Button shape options */

.bestcc--btn-rounded {
  --bestcc-btn-radius: 10px;
}

.bestcc--btn-square {
  --bestcc-btn-radius: 3px;
}

.bestcc-title {
  margin: 0px;
  margin-bottom: 0.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-family: inherit;
  font-size: 1.3em;
  line-height: 1.25;
  color: inherit;
}

.bestcc-message {
  margin: 0px;
  font-size: 1em;
  color: inherit;
}

.bestcc-link {
  white-space: nowrap;
  font-weight: 600;
  text-decoration-line: underline;
  color: inherit;
  text-decoration-color: var(--bestcc-highlight);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.bestcc-link:hover {
  color: var(--bestcc-highlight);
}

/* ---------------------------------------------------------------
	Banner
--------------------------------------------------------------- */

.bestcc-banner {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: var(--bestcc-radius);
  background-color: var(--bestcc-bg);
  color: var(--bestcc-text);
  z-index: 2147483000;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 1180px;
  padding: 24px 28px 24px 28px;
  border-top: 5px solid var(--bestcc-highlight);
  box-shadow: var(--bestcc-shadow);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}

.bestcc-banner.is-visible {
  opacity: 1;
  transform: none;
}

.bestcc--top .bestcc-banner {
  top: 16px;
  bottom: auto;
  transform: translateY(-16px);
}

.bestcc--top .bestcc-banner.is-visible {
  transform: none;
}

.bestcc-banner__inner {
  display: flex;
  align-items: center;
  gap: 18px 36px;
}

.bestcc-banner__text {
  min-width: 0px;
  flex: 1 1 auto;
}

/* Cookie mark before the title */

.bestcc-banner .bestcc-title::before {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-right: .45em;
  vertical-align: -.08em;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 35%, var(--bestcc-bg) 0 9%, transparent 10%), radial-gradient(circle at 62% 30%, var(--bestcc-bg) 0 8%, transparent 9%), radial-gradient(circle at 45% 66%, var(--bestcc-bg) 0 10%, transparent 11%), var(--bestcc-highlight);
}

.bestcc-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 10px;
}

/* Box layout */

.bestcc--box .bestcc-banner {
  left: 16px;
  right: auto;
  max-width: 440px;
  margin: 0;
}

.bestcc--box.bestcc--right .bestcc-banner {
  left: auto;
  right: 16px;
}

.bestcc--box.bestcc--top-left .bestcc-banner,
.bestcc--box.bestcc--top-right .bestcc-banner {
  top: 16px;
  bottom: auto;
  transform: translateY(-16px);
}

.bestcc--box.bestcc--top-right .bestcc-banner {
  left: auto;
  right: 16px;
}

.bestcc--box.bestcc--top-left .bestcc-banner.is-visible,
.bestcc--box.bestcc--top-right .bestcc-banner.is-visible {
  transform: none;
}

/* Popup layout: centred, over a dimmed page */

.bestcc-banner-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 2147482999;
  background: rgba(21, 19, 84, .55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.bestcc--popup .bestcc-banner {
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  width: calc(100% - 32px);
  max-width: 540px;
  margin: 0;
  padding: 32px;
  text-align: center;
  transform: translate(-50%, calc(-50% + 16px));
}

.bestcc--popup .bestcc-banner.is-visible {
  transform: translate(-50%, -50%);
}

.bestcc--popup .bestcc-title {
  margin-bottom: 10px;
}

.bestcc--popup .bestcc-banner__inner,
.bestcc--box .bestcc-banner__inner {
  flex-direction: column;
  align-items: stretch;
}

.bestcc--box .bestcc-actions .bestcc-btn {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------
	Buttons — Accept and Reject share one style on purpose
--------------------------------------------------------------- */

.bestcc-btn {
  margin: 0px;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--bestcc-btn-radius);
  background-color: var(--bestcc-accent);
  text-align: center;
  text-transform: none;
  color: var(--bestcc-accent-text);
  min-height: 48px;
  padding: 11px 24px;
  border: 2px solid var(--bestcc-accent);
  font: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: none;
  transition: transform .15s ease, filter .2s ease, background-color .2s ease, color .2s ease;
}

.bestcc-btn:hover {
  filter: brightness(1.25);
  transform: translateY(-1px);
}

.bestcc-btn:active {
  transform: none;
}

.bestcc-btn--ghost {
  background-color: transparent;
  color: var(--bestcc-text);
  border-color: currentColor;
}

.bestcc-btn--ghost:hover {
  filter: none;
  background: rgba(21, 19, 84, .07);
}

.bestcc-btn:focus-visible,
.bestcc-close:focus-visible,
.bestcc-float:focus-visible,
.bestcc-link:focus-visible,
.bestcc-details summary:focus-visible,
.bestcc-modal__dialog:focus-visible,
.bestcc-placeholder__btn:focus-visible {
  outline: 3px solid var(--bestcc-highlight);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
	Settings dialog
--------------------------------------------------------------- */

.bestcc-modal {
  position: fixed;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483001;
  padding: 24px;
}

.bestcc-modal__backdrop {
  position: absolute;
  inset: 0px;
  background: rgba(21, 19, 84, .55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
}

.bestcc-modal__dialog {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--bestcc-radius);
  background-color: var(--bestcc-bg);
  color: var(--bestcc-text);
  max-width: 680px;
  max-height: min(90vh, 780px);
  border-top: 5px solid var(--bestcc-highlight);
  box-shadow: var(--bestcc-shadow);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
  outline: none;
}

.bestcc-modal.is-open .bestcc-modal__backdrop {
  opacity: 1;
}

.bestcc-modal.is-open .bestcc-modal__dialog {
  opacity: 1;
  transform: none;
}

.bestcc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 10px;
}

.bestcc-modal__head .bestcc-title {
  margin: 0px;
}

.bestcc-close {
  margin: 0px;
  display: inline-flex;
  flex: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  width: 44px;
  height: 44px;
  color: inherit;
}

.bestcc-close:hover {
  background: rgba(21, 19, 84, .08);
  color: var(--bestcc-highlight);
}

.bestcc-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 28px 12px;
  overscroll-behavior: contain;
}

.bestcc-cats {
  display: grid;
  list-style-type: none;
  padding: 0px;
  gap: 12px;
  margin: 18px 0 4px;
}

.bestcc-cat {
  margin: 0px;
  padding: 16px 18px;
  border: 1px solid var(--bestcc-line);
  border-radius: 14px;
  background: var(--bestcc-card);
  color: #151354;
}

.bestcc-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bestcc-cat__label {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05em;
}

.bestcc-cat__desc {
  margin: 6px 0 0;
  font-size: 1em;
  color: #3b3970;
}

.bestcc-always {
  white-space: nowrap;
  border-radius: 9999px;
  font-weight: 600;
  padding: 3px 12px;
  font-size: 15px;
  background: #e6e6ec;
  color: #151354;
}

/* Switch */

.bestcc-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 52px;
  height: 30px;
}

.bestcc-switch input {
  position: absolute;
  inset: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
}

.bestcc-switch__track {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background: #8c8aae;
  transition: background-color .2s ease;
}

.bestcc-switch__track::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  box-shadow: 0 1px 3px rgba(21, 19, 84, .35);
  transition: transform .2s ease;
}

.bestcc-switch input:checked + .bestcc-switch__track {
  background: var(--bestcc-highlight);
}

.bestcc-switch input:checked + .bestcc-switch__track::after {
  transform: translateX(22px);
}

.bestcc-switch input:focus-visible + .bestcc-switch__track {
  outline: 3px solid #151354;
  outline-offset: 3px;
}

/* Cookie list */

.bestcc-details {
  margin-top: 10px;
  font-size: 15px;
}

.bestcc-details summary {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--bestcc-highlight);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.bestcc-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}

.bestcc-table {
  margin: 0px;
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.bestcc-table th,
.bestcc-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--bestcc-line);
}

.bestcc-table th {
  font-weight: 700;
}

.bestcc-table code {
  word-break: break-all;
  font-size: 15px;
  background: none;
  color: inherit;
}

.bestcc-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 22px;
  border-top: 1px solid var(--bestcc-line);
}

/* ---------------------------------------------------------------
	Floating "cookie settings" button
--------------------------------------------------------------- */

.bestcc-float {
  position: fixed;
  margin: 0px;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--bestcc-accent);
  padding: 0px;
  color: var(--bestcc-accent-text);
  z-index: 2147482999;
  bottom: 16px;
  left: 16px;
  width: 50px;
  height: 50px;
  border: 3px solid var(--bestcc-bg);
  box-shadow: 0 10px 24px -6px rgba(21, 19, 84, .5);
  transition: transform .2s ease;
}

.bestcc-float:hover {
  transform: scale(1.07) rotate(-8deg);
}

.bestcc-float::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  top: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  background: var(--bestcc-highlight);
  border: 2px solid var(--bestcc-bg);
}

.bestcc--float-right .bestcc-float {
  left: auto;
  right: 16px;
}

html.bestcc-lock {
  overflow: hidden;
}

/* Shortcodes */

.bestcc-shortcode-btn {
  cursor: pointer;
}

.bestcc-declaration .bestcc-table {
  margin-bottom: 1.5em;
}

/* Opt-out (US) actions: the long button gets room to wrap */

.bestcc-actions--optout [data-bestcc="optout"] {
  white-space: normal;
}

/* Box, popup and small screens: Reject and Accept always side by side at the
	same size, Customise on its own row, so neither choice looks preferred. */

.bestcc--box .bestcc-actions,
.bestcc--popup .bestcc-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bestcc--box .bestcc-actions [data-bestcc="customize"],
.bestcc--popup .bestcc-actions [data-bestcc="customize"] {
  grid-column: 1 / -1;
  order: 3;
}

.bestcc--box .bestcc-actions--optout,
.bestcc--popup .bestcc-actions--optout {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* ---------------------------------------------------------------
	Placeholders for embeds blocked until consent
--------------------------------------------------------------- */

.bestcc-blocked {
  display: none !important;
}

.bestcc-placeholder {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  text-align: center;
  min-height: 200px;
  margin: 0 0 1em;
  padding: 24px;
  background: radial-gradient(circle at 85% 15%, rgba(226, 51, 61, .35), transparent 45%), #151354;
  color: #f7f4ed;
  font-size: 16px;
  line-height: 1.55;
  box-sizing: border-box;
}

.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper > .bestcc-placeholder {
  position: absolute;
  inset: 0px;
  margin: 0px;
  max-width: none;
}

.bestcc-placeholder__inner {
  max-width: 440px;
}

.bestcc-placeholder p {
  margin: 0 0 14px;
  color: inherit;
  font-size: 16px;
}

.bestcc-placeholder__btn {
  margin: 0px;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  border-width: 0px;
  min-height: 48px;
  padding: 11px 24px;
  background: #f7f4ed;
  color: #151354;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: transform .15s ease;
}

.bestcc-placeholder__btn:hover {
  transform: translateY(-1px);
}

.bestcc-placeholder__btn:focus-visible {
  outline-color: #f7f4ed;
}

/* ---------------------------------------------------------------
	Small screens
--------------------------------------------------------------- */

@media (max-width: 782px) {
  .bestcc-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 20px;
  }

  .bestcc--box .bestcc-banner,
	.bestcc--box.bestcc--top-right .bestcc-banner {
    left: 10px;
    right: 10px;
    max-width: none;
  }

  .bestcc--popup .bestcc-banner {
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(100% - 20px);
    padding: 24px 20px;
  }

  .bestcc--top .bestcc-banner,
	.bestcc--box.bestcc--top-left .bestcc-banner,
	.bestcc--box.bestcc--top-right .bestcc-banner {
    top: 10px;
  }

  .bestcc-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .bestcc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bestcc-actions [data-bestcc="customize"] {
    grid-column: 1 / -1;
    order: 3;
  }

  .bestcc-actions .bestcc-btn {
    flex: 1 1 auto;
    white-space: normal;
    padding-left: 14px;
    padding-right: 14px;
  }

  .bestcc-actions--optout {
    grid-template-columns: 1fr !important;
  }

  .bestcc-modal {
    align-items: flex-end;
    padding: 0px;
  }

  .bestcc-modal__dialog {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--bestcc-radius) var(--bestcc-radius) 0 0;
  }

  .bestcc-modal__head {
    padding: 18px 20px 8px;
  }

  .bestcc-modal__body {
    padding: 0 20px 10px;
  }

  .bestcc-modal__actions {
    padding: 14px 20px 18px;
  }

  .bestcc-modal__actions .bestcc-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bestcc-banner,
	.bestcc-btn,
	.bestcc-float,
	.bestcc-modal__backdrop,
	.bestcc-modal__dialog,
	.bestcc-switch__track,
	.bestcc-switch__track::after,
	.bestcc-placeholder__btn {
    transition: none;
  }
}

@media (forced-colors: active) {
  .bestcc-banner,
	.bestcc-modal__dialog,
	.bestcc-float,
	.bestcc-cat,
	.bestcc-switch__track {
    border: 1px solid CanvasText;
  }
}

@media print {
  .bestcc {
    display: none !important;
  }
}