/**
 * @klika/consent — brand theme
 *
 * Redefines CookieConsent v3 CSS custom properties with Klika brand tokens.
 * Consumers can override any variable in their own stylesheet after importing this file.
 *
 * Usage:
 *   import '@klika/consent/styles';
 * or
 *   <link rel="stylesheet" href="/vendor/klika-consent/theme.css">
 */

/* -----------------------------------------------------------------------
   Klika brand tokens — override as needed per project
   When using the UMD/vendor path, load cookieconsent.css separately
   via a <link> tag BEFORE this file. When using the ESM/bundler path,
   import 'vanilla-cookieconsent/dist/cookieconsent.css' in your entry.
   ----------------------------------------------------------------------- */
:root {
  /* Primary brand colour (used for buttons, toggles) */
  --cc-btn-primary-bg: #0057ff;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-hover-bg: #0041cc;

  /* Secondary / outline button */
  --cc-btn-secondary-bg: #f5f5f5;
  --cc-btn-secondary-color: #111111;
  --cc-btn-secondary-hover-bg: #e0e0e0;

  /* Modal background */
  --cc-bg: #ffffff;
  --cc-text: #111111;
  --cc-secondary-color: #555555;

  /* Toggle (on state matches primary) */
  --cc-toggle-on-bg: #0057ff;
  --cc-toggle-off-bg: #c5c5c5;
  --cc-toggle-readonly-bg: #aaaaaa;

  /* Border / separator */
  --cc-separator-border-color: #e5e5e5;

  /* Font */
  --cc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cc-font-size: 15px;
  --cc-link-color: #0057ff;

  /* Border radius */
  --cc-modal-border-radius: 8px;
  --cc-btn-border-radius: 6px;
}

/* Consent banner "Manage preferences": the library renders it as a secondary
   button, and at the light-grey secondary background it blends into the banner
   and reads as a lesser option than Accept all / Reject optional cookies.
   Give it the same weight as the other two so all three choices are equally
   visible. Scoped to the banner's data-role="show" button only — the
   preferences modal (pm__btn--secondary) keeps its secondary styling. */
#cc-main .cm__btn--secondary[data-role="show"] {
  background: var(--cc-btn-primary-bg);
  border-color: var(--cc-btn-primary-border-color);
  color: var(--cc-btn-primary-color);
}
#cc-main .cm__btn--secondary[data-role="show"]:hover {
  background: var(--cc-btn-primary-hover-bg);
  border-color: var(--cc-btn-primary-hover-border-color);
  color: var(--cc-btn-primary-hover-color);
}

/* Toggle knob icons: the library scales the check/cross to .55, which sits tight
   against the circle edge and reads as clipped. Shrink slightly for even padding.
   Icon scale is not exposed as a CSS variable, so this is a scoped override. */
#cc-main .toggle__icon-on svg { transform: scale(0.42) rotate(-45deg); }
#cc-main .toggle__icon-off svg { transform: scale(0.42); }

/* Section expand chevron: the library's SVG chevron is slightly lopsided (its
   path is off-centre). Replace it with a symmetric CSS chevron (a rotated
   bordered square) that stays even in both collapsed and expanded states.
   Uses the brand secondary colour; not achievable via CSS variables alone. */
#cc-main .pm__section-arrow { align-items: center; }
#cc-main .pm__section-arrow svg { display: none; }
#cc-main .pm__section-arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid var(--cc-btn-secondary-color);
  border-bottom: 2px solid var(--cc-btn-secondary-color);
  transform: rotate(45deg);
}
#cc-main .pm__section--toggle.is-expanded .pm__section-arrow { transform: rotate(180deg); }