/* NorgesProfil look for the consent banner (loaded after vendor/cookieconsent.css). */
#cc-main {
  --cc-font-family: inherit;
  --cc-modal-border-radius: 10px;
  --cc-btn-border-radius: 999px;
  --cc-z-index: 2147483000;

  --cc-primary-color: #111111;
  --cc-secondary-color: #444444;
  --cc-link-color: #111111;

  --cc-btn-primary-bg: var(--np-consent-color, #ff5100);
  --cc-btn-primary-color: var(--np-consent-on, #ffffff);
  --cc-btn-primary-border-color: var(--np-consent-color, #ff5100);
  --cc-btn-primary-hover-bg: var(--np-consent-color, #ff5100);
  --cc-btn-primary-hover-color: var(--np-consent-on, #ffffff);
  --cc-btn-primary-hover-border-color: var(--np-consent-color, #ff5100);

  --cc-btn-secondary-bg: #f1f1f1;
  --cc-btn-secondary-color: #111111;
  --cc-btn-secondary-border-color: #f1f1f1;
  --cc-btn-secondary-hover-bg: #e2e2e2;
  --cc-btn-secondary-hover-color: #111111;
  --cc-btn-secondary-hover-border-color: #e2e2e2;

  --cc-toggle-on-bg: var(--np-consent-color, #ff5100);
  --cc-toggle-readonly-bg: #d5d5d5;
}

/* The themes set their own link and heading rules; keep the banner's text calm on both sites. */
#cc-main a {
  text-decoration: underline;
}

#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  text-transform: none;
  letter-spacing: 0;
}

/* Consent box: heading with the logo on the same row, roomy text, pill buttons in one row with «Godta alle» last. */
#cc-main .cm {
  max-width: 44rem;
}

#cc-main .cm__texts {
  padding-top: 1.5rem;
}

#cc-main .cm__title {
  align-items: center;
  display: flex;
  font-size: 1.25em;
  font-weight: 700;
  gap: 1rem;
  justify-content: space-between;
  padding: 0 1.75rem;
  white-space: nowrap;
}

/* The heading stays on one line; the logo gives way and scales down inside the space that is left. */
#cc-main .np-consent-logo {
  display: block;
  flex: 0 1 auto;
  height: 44px;
  min-width: 0;
  object-fit: contain;
  object-position: right center;
  width: auto;
}

#cc-main .cm__desc {
  color: #111111;
  font-size: 1em;
  line-height: 1.65;
  padding: 0.75rem 1.75rem 1.5rem;
}

#cc-main .cm__desc .np-s,
#cc-main .cm__desc .np-l {
  display: block;
}

#cc-main .cm__desc .np-gap {
  margin-top: 1em;
}

#cc-main .cm__btns {
  padding: 1.25rem 1.75rem;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-size: 0.95em;
  min-height: 52px;
  padding: 0.5em 1.75em;
}

#cc-main .cm__btn[data-role='show'] {
  background: transparent;
  border-color: transparent;
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 4px;
}

#cc-main .cm__btn[data-role='show']:hover {
  background: #f1f1f1;
  border-color: #f1f1f1;
}

@media screen and (min-width: 641px) {
  #cc-main .cm__btns {
    align-items: center;
    flex-direction: row-reverse;
    gap: 0.6rem;
    justify-content: space-between;
  }

  #cc-main .cm--wide .cm__btn-group {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row-reverse;
    gap: 0.6rem;
  }

  #cc-main .cm--wide .cm__btn-group .cm__btn {
    margin: 0;
    min-width: 12.5rem;
  }

  #cc-main .cm--wide .cm__btn-group + .cm__btn-group {
    margin: 0;
  }

  #cc-main .cm--wide .cm__btn[data-role='show'] {
    min-width: 0;
  }
}

/* «Bare nødvendige»: outlined in the brand colour, next to the filled «Godta alle». */
#cc-main .cm__btn[data-role='necessary'],
#cc-main .pm__btn[data-role='necessary'] {
  background: #ffffff;
  border-color: var(--np-consent-color, #ff5100);
  color: #111111;
}

#cc-main .cm__btn[data-role='necessary']:hover,
#cc-main .pm__btn[data-role='necessary']:hover {
  background: #f6f6f6;
  border-color: var(--np-consent-color, #ff5100);
  color: #111111;
}

@media screen and (max-width: 640px) {
  #cc-main .cm__title {
    font-size: 1.08em;
    gap: 0.6rem;
  }

  #cc-main .np-consent-logo {
    height: 34px;
  }
}

/* Filled buttons darken a little under the pointer, whatever the brand colour. */
#cc-main .cm__btn[data-role='all']:hover,
#cc-main .pm__btn[data-role='all']:hover {
  filter: brightness(0.94);
}