/* ==========================================================================
   Cookie banner + "Cookie settings" modal (vanilla-cookieconsent, js/qp-consent.js) in the QPoint look.
   Load after vendor/libs/cookieconsent/cookieconsent.css. Only this site: qp-consent.js is shared with
   app.qpointsurvey.com and stays as it is (its "Reject all" outline rule reads --cc-btn-primary-bg).
   Colours come from the brand tokens (qpoint-tokens.css).
   ========================================================================== */
#cc-main {
  --cc-font-family: var(--qp-font-sans);
  --cc-modal-border-radius: 1.25rem;
  --cc-btn-border-radius: .625rem;
  --cc-modal-margin: 1rem;
  --cc-z-index: 2147483000;

  --cc-bg: #fff;
  --cc-primary-color: var(--qp-navy-950);
  --cc-secondary-color: var(--qp-navy-600);
  --cc-link-color: var(--qp-green-600);
  --cc-overlay-bg: rgb(19 21 39 / .55);

  --cc-btn-primary-bg: var(--qp-green-500);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--qp-green-500);
  --cc-btn-primary-hover-bg: var(--qp-green-700);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--qp-green-700);

  --cc-btn-secondary-bg: var(--qp-navy-100);
  --cc-btn-secondary-color: var(--qp-navy-950);
  --cc-btn-secondary-border-color: var(--qp-navy-100);
  --cc-btn-secondary-hover-bg: var(--qp-green-50);
  --cc-btn-secondary-hover-color: var(--qp-green-800);
  --cc-btn-secondary-hover-border-color: var(--qp-green-200);

  --cc-separator-border-color: var(--qp-navy-200);

  --cc-toggle-on-bg: var(--qp-green-500);
  --cc-toggle-off-bg: var(--qp-navy-400);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-enabled-icon-color: #fff;
  --cc-toggle-disabled-icon-color: #fff;
  --cc-toggle-readonly-bg: var(--qp-green-200);
  --cc-toggle-readonly-knob-bg: #fff;
  --cc-toggle-readonly-knob-icon-color: var(--qp-green-200);

  --cc-section-category-border: var(--qp-navy-200);
  --cc-cookie-category-block-bg: var(--qp-navy-50);
  --cc-cookie-category-block-border: var(--qp-navy-200);
  --cc-cookie-category-block-hover-bg: var(--qp-navy-100);
  --cc-cookie-category-block-hover-border: var(--qp-navy-300);
  --cc-cookie-category-expanded-block-bg: #fff;
  --cc-cookie-category-expanded-block-hover-bg: var(--qp-navy-50);

  --cc-footer-bg: var(--qp-navy-50);
  --cc-footer-color: var(--qp-navy-600);
  --cc-footer-border-color: var(--qp-navy-200);
}

/* the boxes: white card with the site's soft float shadow */
#cc-main .cm,
#cc-main .pm { box-shadow: 0 24px 50px -28px rgb(19 21 39 / .45), 0 1px 2px rgb(19 21 39 / .06); }
#cc-main .cm { border: 1px solid var(--qp-navy-200); }

/* titles like the site's card titles (medium weight, tight tracking) */
#cc-main .cm__title,
#cc-main .pm__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--qp-navy-950); }
#cc-main .cm__desc,
#cc-main .pm__section-desc { font-size: .9375rem; line-height: 1.55; }
#cc-main .pm__section-title { font-weight: 600; }

/* buttons: the site's button weight and size, green focus ring */
#cc-main .cm__btn,
#cc-main .pm__btn { font-weight: 600; font-size: .9375rem; padding: .75rem 1.25rem; min-height: 2.875rem; transition: background-color .2s, color .2s, border-color .2s; }
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible,
#cc-main .section__toggle:focus-visible + .toggle__icon,
#cc-main .pm__section-title:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--qp-focus); }

/* links: green, no underline animation colour clash */
#cc-main a,
#cc-main .cc__link { color: var(--cc-link-color); font-weight: 600; }
#cc-main a:hover,
#cc-main .cc__link:hover { color: var(--qp-green-700); }

/* close button: round, light grey like the site's controls */
#cc-main .pm__close-btn { border-radius: 50%; background: var(--qp-navy-100); border-color: var(--qp-navy-100); }
#cc-main .pm__close-btn:hover { background: var(--qp-green-50); border-color: var(--qp-green-200); }
#cc-main .pm__close-btn svg { stroke: var(--qp-navy-800); }

/* category blocks: rounded like the site's cards */
#cc-main .pm__section--toggle,
#cc-main .pm__section--toggle .pm__section-title { border-radius: .875rem; }
#cc-main .pm__section--toggle.is-expanded .pm__section-title { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  #cc-main { --cc-modal-transition-duration: 0s; }
}