/*
 * Futurion skin for vanilla-cookieconsent.
 *
 * Loaded after the library stylesheet, so these variables win over its
 * defaults at equal specificity. The palette follows the newsletter floater:
 * purple panel, white copy, green accents and outlined green buttons. Theme
 * tokens carry fallbacks so the module still reads correctly on its own.
 */
#cc-main {
  --cc-font-family: "GT-Walsheim", system-ui, -apple-system, sans-serif;
  --cc-modal-border-radius: 22px;
  --cc-btn-border-radius: 999px;
  --cc-modal-margin: var(--grid-gutter, 20px);

  --cc-bg: var(--futurion-purple, #422c6e);
  --cc-primary-color: var(--futurion-white, #fffefa);
  --cc-secondary-color: rgba(255, 254, 250, 0.82);
  --cc-link-color: var(--futurion-green, #b7ff73);
  --cc-overlay-bg: rgba(20, 12, 36, 0.55);
  --cc-separator-border-color: rgba(255, 254, 250, 0.16);

  /*
   * Accept and reject share one style (equalWeightButtons), so declining is
   * as easy to find as accepting. Both use the primary variables.
   */
  --cc-btn-primary-bg: transparent;
  --cc-btn-primary-color: var(--futurion-green, #b7ff73);
  --cc-btn-primary-border-color: var(--futurion-green, #b7ff73);
  --cc-btn-primary-hover-bg: var(--futurion-green, #b7ff73);
  --cc-btn-primary-hover-color: var(--futurion-purple, #422c6e);
  --cc-btn-primary-hover-border-color: var(--futurion-green, #b7ff73);

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--futurion-white, #fffefa);
  --cc-btn-secondary-border-color: rgba(255, 254, 250, 0.35);
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
  --cc-btn-secondary-hover-color: var(--futurion-white, #fffefa);
  --cc-btn-secondary-hover-border-color: rgba(255, 254, 250, 0.6);

  --cc-toggle-on-bg: var(--futurion-green, #b7ff73);
  --cc-toggle-on-knob-bg: var(--futurion-purple, #422c6e);
  --cc-toggle-off-bg: rgba(255, 254, 250, 0.28);
  --cc-toggle-off-knob-bg: var(--futurion-white, #fffefa);
  --cc-toggle-enabled-icon-color: var(--futurion-green, #b7ff73);
  --cc-toggle-disabled-icon-color: var(--futurion-purple, #422c6e);
  --cc-toggle-readonly-bg: rgba(183, 255, 115, 0.45);
  --cc-toggle-readonly-knob-bg: var(--futurion-purple, #422c6e);
  --cc-toggle-readonly-knob-icon-color: var(--futurion-green, #b7ff73);

  --cc-section-category-border: rgba(255, 254, 250, 0.16);
  --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.06);
  --cc-cookie-category-block-border: rgba(255, 254, 250, 0.12);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.1);
  --cc-cookie-category-block-hover-border: rgba(255, 254, 250, 0.2);
  --cc-cookie-category-expanded-block-bg: rgba(255, 255, 255, 0.04);
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.08);

  --cc-footer-bg: rgba(0, 0, 0, 0.12);
  --cc-footer-color: rgba(255, 254, 250, 0.76);
  --cc-footer-border-color: rgba(255, 254, 250, 0.12);

  --cc-webkit-scrollbar-bg: rgba(255, 254, 250, 0.25);
  --cc-webkit-scrollbar-hover-bg: rgba(255, 254, 250, 0.4);
}

#cc-main .cm,
#cc-main .pm {
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
}

#cc-main .cm__title,
#cc-main .pm__title {
  color: var(--futurion-green, #b7ff73);
  font-weight: 400;
}

/*
 * The library rounds the preference sections with the button radius, which
 * the pill buttons above set to 999px. On a multi-line section that reads as a
 * stretched capsule, so the sections get a radius of their own.
 */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section--toggle .pm__section-desc-wrapper,
#cc-main .pm__section-title {
  border-radius: 14px;
}

/*
 * Below 640px the library stretches the banner across the bottom of the
 * screen, where it would sit on top of the newsletter button. The button is
 * hidden until a choice is made rather than left half-covered.
 */
@media (max-width: 640px) {
  html.show--consent .futurion-newsletter {
    visibility: hidden;
  }
}

/* Footer link, sized and underlined like the credit next to it. */
.futurion-cookie-settings {
  position: relative;
  z-index: 0;
  margin: 0 0 0 0.75em;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}

.futurion-cookie-settings::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 2px;
  background: var(--futurion-orange, #ff461d);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.futurion-cookie-settings:hover::after,
.futurion-cookie-settings:focus-visible::after {
  opacity: 1;
}