/* Theme overrides for vanilla-cookieconsent — aligned with zoosk-bonfire cookie-consent.css */
#cc-main {
  --cc-bg: var(--color-surface-canvas);
  --cc-font-family: var(--font-body);
  --cc-modal-border-radius: var(--radius-xl);
  --cc-text-color: var(--neutral-700);
  --cc-btn-border-radius: 999px;
  --cc-btn-primary-bg: var(--primary-500);
  --cc-btn-primary-color: var(--white);
  --cc-btn-primary-hover-bg: var(--primary-600);
  --cc-btn-primary-hover-color: var(--white);
  --cc-btn-secondary-bg: var(--neutral-200);
  --cc-btn-secondary-color: var(--neutral-700);
  --cc-btn-secondary-border-color: var(--neutral-300);
  --cc-btn-secondary-hover-bg: var(--neutral-300);
  --cc-btn-secondary-hover-color: var(--neutral-700);
  --cc-btn-secondary-hover-border-color: var(--neutral-300);
  --cc-toggle-on-bg: var(--primary-500);
  --cc-toggle-off-bg: var(--neutral-300);
  --cc-toggle-on-knob-bg: var(--white);
  --cc-toggle-off-knob-bg: var(--white);
  --cc-toggle-enabled-icon-color: var(--white);
  --cc-toggle-disabled-icon-color: var(--white);
  --cc-section-category-border: transparent;
  --cc-cookie-category-block-bg: transparent;
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: transparent;
  --cc-cookie-category-block-hover-border: transparent;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: transparent;
  --cc-footer-bg: var(--color-surface-canvas);
}

#cc-main .pm__section-desc-wrapper {
  --cc-btn-border-radius: 0;
}

#cc-main .pm__section-arrow {
  --cc-toggle-readonly-bg: transparent;
}

#cc-main .cc__link {
  text-decoration: underline;
  font-weight: 600 !important;
}

#cc-main .pm__section-title {
  text-decoration: underline;
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 700;
  font-size: 1.125rem !important;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-weight: 500;
}

#cc-main .pm__header {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
}

#cc-main .pm__close-btn {
  align-self: flex-end;
}

#cc-main .cc__heading {
  color: var(--neutral-700);
  font-weight: 700;
}

@media screen and (min-width: 1280px) {
  #cc-main .pm--box {
    width: 433px !important;
  }

  #cc-main .pm__footer {
    flex-direction: column;
  }

  #cc-main .pm__btn-group {
    flex-direction: column;
    margin-left: 0 !important;
  }

  #cc-main .pm__btn {
    margin-top: 0.5rem;
    margin-bottom: 0;
    margin-left: 0 !important;
  }

  #cc-main .pm__title {
    margin-right: 0 !important;
  }
}