/**
 * cred.ai brand theme for CookieConsent v3.
 *
 * Pink (#FF2A7F -> #FF34FF, the same gradient as the sticky lead form),
 * black surfaces, white type.
 */

#cc-main {
  --cc-font-family: "nunito-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cc-bg: #000;
  --cc-primary-color: #fff;
  --cc-secondary-color: rgba(255, 255, 255, 0.68);

  --cc-btn-primary-bg: #ff2a7f;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: #ff2a7f;
  --cc-btn-primary-hover-bg: #ff34ff;
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: #ff34ff;

  --cc-btn-secondary-bg: #1a1a1a;
  --cc-btn-secondary-color: #fff;
  --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.35);
  --cc-btn-secondary-hover-bg: #2b2b2b;
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: #fff;

  --cc-separator-border-color: rgb(67 67 67);

  --cc-toggle-on-bg: #ff2a7f;
  --cc-toggle-off-bg: #4a4a4a;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;

  --cc-toggle-readonly-bg: #2b2b2b;
  --cc-toggle-readonly-knob-bg: rgba(255, 255, 255, 0.6);
  --cc-toggle-readonly-knob-icon-color: #000;

  --cc-link-color: #ff34ff;
  --cc-link-hover-color: #ff2a7f;

  --cc-modal-border-radius: 9px;
  --cc-btn-border-radius: 9px;

  --cc-cookie-category-block-bg: #121212;
  --cc-cookie-category-block-border: rgb(67 67 67);
  --cc-section-category-border: rgb(67 67 67);
  --cc-cookie-category-block-hover-bg: #1a1a1a;
  --cc-cookie-category-block-hover-border: rgb(67 67 67);
  --cc-cookie-category-expanded-block-bg: #000;

  --cc-overlay-bg: rgba(0, 0, 0, 0.75);
  --cc-footer-bg: #000;
  --cc-footer-color: rgba(255, 255, 255, 0.68);
  --cc-footer-border-color: rgb(67 67 67);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: "neue-haas-grotesk-display", "nunito-sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* Accept all carries the brand gradient, the way site CTAs do. */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
  background: linear-gradient(135deg, #ff2a7f 0%, #ff34ff 100%);
  border-color: transparent;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
  background: linear-gradient(135deg, #ff34ff 0%, #ff2a7f 100%);
  border-color: transparent;
}

/* Footer opt-out links */
.cred-consent-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px;
  margin-top: -40px;
  /* Pulled up over the section above it, so it needs its own stacking context.
     One below the library's banner, which sits at 2147483647. */
  position: relative;
  z-index: 2147483646;
}

.cred-consent-footer__sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1;
}

a.cred-consent-footer__link {
  text-decoration: underline;
}

.cred-consent-footer__link {
  background: none;
  border: 0;
  padding: 0;
  font-family: "nunito-sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: underline;
  cursor: pointer;
}

.cred-consent-footer__link:hover,
.cred-consent-footer__link:focus {
  color: #fff;
  background: none;
}

/*
 * Reject and Manage sit on a flat grey with no border, so Accept keeps the
 * only visual emphasis.
 */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .cm__btn[data-role="show"],
#cc-main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"] {
  background: #232323;
  color: #fff;
  border: 0;
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .cm__btn[data-role="show"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover {
  background: #2e2e2e;
  border: 0;
}

/* Shorter, tighter banner buttons. */
#cc-main .cm__btns .cm__btn {
  min-height: 0;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.2;
}

/* Banner shell: hairline border, softer corner radius. */
#cc-main .cm {
  border: 1px solid rgb(67 67 67);
  border-radius: 1.25rem;
}

/* Tighter gap between the banner title and its copy (was 1.1em). */
#cc-main .cm__title + .cm__desc {
  margin-top: 0.55em;
}

/*
 * Accept / Reject / Manage as three equal columns. The buttons live in two
 * separate .cm__btn-group wrappers, so those are flattened with
 * display: contents and the buttons become the grid items.
 */
#cc-main .cm__btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#cc-main .cm__btn-group {
  display: contents;
}

#cc-main .cm__btns .cm__btn {
  width: 100%;
  margin: 0;
}

/*
 * Banner copy matches .paragraph on apply.cred.ai: fluid 3.73vw on small
 * screens, 14px from their 480px breakpoint up.
 */
#cc-main .cm__desc {
  --tw-text-opacity: 1;
  color: rgb(238 238 238 / var(--tw-text-opacity, 1));
  letter-spacing: -0.01em;
  font-family: "Nunito Sans", "nunito-sans", sans-serif;
  font-size: 3.73vw;
  font-weight: 300;
  line-height: 1.05rem;
}

@media (min-width: 480px) {
  #cc-main .cm__desc {
    font-size: 14px;
  }
}

/*
 * Even .9375rem padding on each banner region. The library pads the title and
 * description individually (0 20.8px / 0 20.8px 14px), so those are zeroed and
 * the spacing comes from the regions themselves.
 */
#cc-main .cm__texts,
#cc-main .cm__btns {
  padding: 0.9375rem;
}

#cc-main .cm__title,
#cc-main .cm__desc {
  padding: 0;
}

/* No divider or top padding between the banner copy and its buttons. */
#cc-main .cm__btns {
  border-top: 0;
  padding-top: 0;
}

/* Preferences modal matches the banner shell. */
#cc-main .pm--box {
  border: 1px solid rgb(67 67 67);
  border-radius: 1.25rem;
}

/*
 * Tighter toggle rows in the preferences modal: vertical padding only, so the
 * library's horizontal padding still reserves room for the arrow and toggle.
 */
#cc-main .pm__section--toggle .pm__section-title {
  /* The library's own min-height (58px) would keep the row tall regardless. */
  min-height: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Preferences modal title matches the banner title exactly. */
#cc-main .pm__title {
  font-size: 1.05em;
  line-height: 1.15;
}

/* Close button is just the X: no chrome, pink on hover. */
#cc-main .pm__close-btn {
  background: none;
  border: 0;
  box-shadow: none;
}

#cc-main .pm__close-btn:hover,
#cc-main .pm__close-btn:focus-visible {
  background: none;
  border: 0;
}

#cc-main .pm__close-btn svg {
  stroke: currentColor;
  transition: stroke 150ms ease;
}

#cc-main .pm__close-btn:hover svg,
#cc-main .pm__close-btn:focus-visible svg {
  stroke: #ff2a7f;
}

/* No gap between the toggle list and the section that follows it. */
#cc-main .pm__section-toggles + .pm__section {
  margin-top: 0;
}

/* Intro section sits closer to the toggle list. */
#cc-main .pm__section:first-child {
  margin-bottom: 1rem;
}


/*
 * Expanding a section re-points --cc-cookie-category-block-border at
 * --cc-cookie-category-expanded-block-hover-bg, which otherwise falls back to
 * the library's light default.
 */
#cc-main .pm__section--toggle.is-expanded {
  --cc-cookie-category-block-border: rgb(67 67 67);
}