/*
 * Brantial look for CookieConsent v3, loaded after the vendor stylesheet.
 * Consent box: title, text, three equal buttons, the cookie policy link.
 * Preferences: one row per category (switch or "Always active"), the same
 * three buttons and link. Colours come from the site tokens, so light and
 * dark follow the page.
 */
#cc-main {
  --cc-font-family: inherit;
  --cc-bg: var(--card, #fff);
  --cc-primary-color: var(--text, #141210);
  --cc-secondary-color: var(--t3, #57534e);
  --cc-link-color: var(--brand, #6244e5);
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 10px;
  --cc-btn-primary-bg: var(--brand, #6244e5);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--brand, #6244e5);
  --cc-btn-primary-hover-bg: color-mix(
    in srgb,
    var(--brand, #6244e5) 86%,
    #000
  );
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: color-mix(
    in srgb,
    var(--brand, #6244e5) 86%,
    #000
  );
  --cc-btn-secondary-bg: var(--tint2, #f1efea);
  --cc-btn-secondary-color: var(--text, #141210);
  --cc-btn-secondary-border-color: var(--border2, #e4e0d8);
  --cc-btn-secondary-hover-bg: var(--tint3, #e9e5dd);
  --cc-btn-secondary-hover-color: var(--text, #141210);
  --cc-btn-secondary-hover-border-color: var(--border3, #d6d1c7);
  --cc-separator-border-color: var(--border, #ece8e1);
  --cc-toggle-on-bg: var(--brand, #6244e5);
  --cc-toggle-off-bg: var(--t5, #a8a29e);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-enabled-icon-color: var(--brand, #6244e5);
  --cc-toggle-disabled-icon-color: var(--t5, #a8a29e);
  --cc-cookie-category-block-bg: var(--tint2, #f1efea);
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: var(--tint3, #e9e5dd);
  --cc-cookie-category-block-hover-border: transparent;
  --cc-cookie-category-expanded-block-bg: var(--tint2, #f1efea);
  --cc-cookie-category-expanded-block-hover-bg: var(--tint3, #e9e5dd);
  --cc-section-category-border: transparent;
  --cc-footer-bg: transparent;
  --cc-footer-color: var(--t3, #57534e);
  --cc-footer-border-color: transparent;
  --cc-overlay-bg: rgba(10, 10, 10, 0.5);
}

/* ---------------------------------------------------------- consent box */
#cc-main .cm {
  max-width: 34rem;
  border: 1px solid var(--border2, #e4e0d8);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
#cc-main .cm__body {
  flex-direction: column;
  padding: 0;
}
#cc-main .cm__texts {
  padding: 26px 28px 0;
}
#cc-main .cm__title {
  padding: 0 32px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
#cc-main .cm__desc {
  max-height: none;
  padding: 16px 0 0;
  color: var(--t2, #292524);
  font-size: 15px;
  line-height: 1.6;
}
#cc-main .cm__btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 22px 28px 0;
  border: 0;
}
#cc-main .cm__btn-group {
  display: contents;
}
#cc-main .cm__btn,
#cc-main .pm__btn {
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  font-size: 14.5px;
  white-space: nowrap;
  font-weight: 600;
}
#cc-main .cm__footer {
  justify-content: center;
  padding: 16px 28px 20px;
  border: 0;
}
#cc-main .cm__links,
#cc-main .cm__link-group {
  justify-content: center;
  width: 100%;
}
#cc-main .cm__footer a,
#cc-main .pm__policy {
  color: var(--brand, #6244e5);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The close button also carries .cm__btn: undo the 48px button height. */
#cc-main .cm .cm__btn.cm__btn--close {
  top: 18px;
  right: 18px;
  display: flex;
  width: 30px;
  min-height: 0;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--text, #141210);
  border-radius: 6px;
  background: transparent;
}
#cc-main .cm .cm__btn--close svg,
#cc-main .pm .pm__close-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--text, #141210);
  stroke-width: 2.5;
}

/* ------------------------------------------------------ preferences box */
#cc-main .pm {
  max-width: 34rem;
  border: 1px solid var(--border2, #e4e0d8);
}
#cc-main .pm__header {
  justify-content: center;
  padding: 22px 28px 0;
  border: 0;
}
#cc-main .pm__title {
  flex: 1;
  padding-left: 32px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
#cc-main .pm__body {
  padding: 16px 28px 0;
}
#cc-main .pm__section:first-child .pm__section-desc {
  color: var(--t2, #292524);
  font-size: 15px;
  line-height: 1.6;
}
#cc-main .pm__section--toggle {
  margin-bottom: 8px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}
#cc-main .pm__section--toggle .pm__section-title {
  min-height: 56px;
  padding: 1rem 5.2rem 1rem 1.2rem;
  border: 0;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 500;
}
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border: 0;
}
#cc-main .pm__section-desc {
  font-size: 14px;
  line-height: 1.6;
}
/* "Always active" replaces the locked switch of the necessary category. */
#cc-main .pm__always {
  color: var(--pos, #15803d);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
#cc-main .section__toggle-wrapper:has(.pm__always) {
  right: 3.2rem;
  width: auto;
}
#cc-main .section__toggle-wrapper:has(.pm__always) .section__toggle,
#cc-main .section__toggle-wrapper:has(.pm__always) .toggle__icon {
  display: none;
}
#cc-main .pm__footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 28px 0;
  border: 0;
}
#cc-main .pm__btn-group {
  display: contents;
}
#cc-main .pm__policy {
  display: block;
  padding: 16px 28px 20px;
  text-align: center;
}

@media (max-width: 480px) {
  #cc-main .cm__btns,
  #cc-main .pm__footer {
    grid-template-columns: minmax(0, 1fr);
  }
  #cc-main .cm__texts,
  #cc-main .cm__btns,
  #cc-main .cm__footer,
  #cc-main .pm__body,
  #cc-main .pm__footer {
    padding-inline: 18px;
  }
}

/* ------------------------------------------------ preferences: fine tuning */
/* One box at a time, as in the consent pattern this follows. */
.show--preferences #cc-main .cm-wrapper {
  opacity: 0;
  pointer-events: none;
}
#cc-main .pm__header {
  position: relative;
}
/* The vendor reset makes the h2 inline, where text-align has no effect. */
#cc-main .pm__title,
#cc-main .cm__title {
  display: block;
  width: 100%;
}
#cc-main .pm__title {
  padding: 0 44px;
}
#cc-main .pm .pm__close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--text, #141210);
  border-radius: 6px;
  background: transparent;
}
/* Chevron on the right, after the switch or "Always active" label. */
#cc-main .pm__section--toggle .pm__section-title {
  padding: 1rem 6.4rem 1rem 1.2rem;
}
#cc-main .pm__section--expandable .pm__section-arrow {
  right: 1.1rem;
  left: auto;
  background: transparent;
}
#cc-main .pm__section-arrow svg {
  stroke: var(--text, #141210);
  stroke-width: 2.5;
}
#cc-main .section__toggle-wrapper {
  right: 3.4rem;
}
#cc-main .section__toggle-wrapper:has(.pm__always) {
  right: 3.4rem;
}
/* The vendor box is a fixed-height sheet; this one hugs its content. */
#cc-main .pm.pm--box {
  height: auto;
  max-height: calc(100% - 2em);
  top: 50%;
  transform: translateY(-50%);
}
/* The vendor shrinks the icon to half its box; size it directly instead. */
#cc-main .pm .pm__close-btn svg,
#cc-main .cm .cm__btn--close svg {
  width: 16px;
  height: 16px;
  transform: none;
}
#cc-main .pm .pm__close-btn span,
#cc-main .cm .cm__btn--close span {
  align-items: center;
  justify-content: center;
}
/* Dark theme: --brand turns light lavender, so the filled button needs dark
   text to stay readable (white on it is about 2:1). */
.cc--darkmode #cc-main {
  --cc-btn-primary-color: #121212;
  --cc-btn-primary-hover-color: #121212;
  --cc-btn-primary-hover-bg: color-mix(
    in srgb,
    var(--brand, #b7a6ff) 86%,
    #fff
  );
  --cc-btn-primary-hover-border-color: color-mix(
    in srgb,
    var(--brand, #b7a6ff) 86%,
    #fff
  );
}