/**
 * Codex Cookie Consent — banner theme.
 *
 * Themes vanilla-cookieconsent via its --cc-* custom properties.
 * The accent colour is printed inline as --ccc-accent from plugin settings.
 */

:root {
  --ccc-accent: #005AA7;
  --ccc-cat-necessary: #64748b;
  --ccc-cat-functional: #0d9488;
  --ccc-cat-analytics: #2563eb;
  --ccc-cat-marketing: #d97706;
}

#cc-main {
  --cc-font-family: inherit;
  --cc-modal-border-radius: 14px;
  --cc-btn-border-radius: 8px;
  --cc-pm-toggle-border-radius: 999px;

  --cc-bg: #fff;
  --cc-primary-color: #1d2d5d;
  --cc-secondary-color: #4c5a76;

  --cc-btn-primary-bg: var(--ccc-accent);
  --cc-btn-primary-border-color: var(--ccc-accent);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-hover-bg: color-mix(in srgb, var(--ccc-accent) 82%, #000);
  --cc-btn-primary-hover-border-color: color-mix(in srgb, var(--ccc-accent) 82%, #000);
  --cc-btn-primary-hover-color: #fff;

  --cc-btn-secondary-bg: #eef1f6;
  --cc-btn-secondary-border-color: #eef1f6;
  --cc-btn-secondary-color: #1d2d5d;
  --cc-btn-secondary-hover-bg: #e2e7ef;
  --cc-btn-secondary-hover-border-color: #e2e7ef;
  --cc-btn-secondary-hover-color: #1d2d5d;

  --cc-link-color: var(--ccc-accent);
  --cc-separator-border-color: #e7eaf1;
  --cc-toggle-on-bg: var(--ccc-accent);
  --cc-toggle-off-bg: #c3cad8;
  --cc-toggle-readonly-bg: color-mix(in srgb, var(--ccc-cat-necessary) 45%, #fff);
  --cc-cookie-category-block-bg: #f6f8fb;
  --cc-cookie-category-block-border: #e7eaf1;
  --cc-cookie-category-block-hover-bg: #eef1f6;
  --cc-cookie-category-block-hover-border: #dde3ec;
  --cc-footer-bg: #f6f8fb;
  --cc-footer-border-color: #e7eaf1;
  --cc-overlay-bg: rgba(17, 25, 58, 0.5);
}

.cc--darkmode #cc-main {
  --cc-bg: #171f3d;
  --cc-primary-color: #eef1f8;
  --cc-secondary-color: #aeb7cd;
  --cc-btn-secondary-bg: #232c4f;
  --cc-btn-secondary-border-color: #232c4f;
  --cc-btn-secondary-color: #eef1f8;
  --cc-btn-secondary-hover-bg: #2b3660;
  --cc-btn-secondary-hover-border-color: #2b3660;
  --cc-btn-secondary-hover-color: #fff;
  --cc-separator-border-color: #2b3660;
  --cc-toggle-off-bg: #3a466f;
  --cc-cookie-category-block-bg: #1e2747;
  --cc-cookie-category-block-border: #2b3660;
  --cc-cookie-category-block-hover-bg: #232c4f;
  --cc-cookie-category-block-hover-border: #34406c;
  --cc-footer-bg: #121834;
  --cc-footer-border-color: #2b3660;
  --cc-overlay-bg: rgba(5, 8, 20, 0.65);
}

#cc-main .cm {
  box-shadow: 0 12px 40px rgba(17, 25, 58, 0.18), 0 2px 8px rgba(17, 25, 58, 0.08);
}

/*
 * Category colour language: each preference toggle takes its category's
 * colour when switched on (the toggle input's value is the category key).
 */
#cc-main .section__toggle[value='functional']:checked ~ .toggle__icon {
  background: var(--ccc-cat-functional);
}

#cc-main .section__toggle[value='analytics']:checked ~ .toggle__icon {
  background: var(--ccc-cat-analytics);
}

#cc-main .section__toggle[value='marketing']:checked ~ .toggle__icon {
  background: var(--ccc-cat-marketing);
}

/* Reopen-preferences element rendered by the [cookie_preferences] shortcode. */
.ccc-preferences-link {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

/*
 * Motion. The library animates entry via .cc--anim and
 * --cc-modal-transition-duration; we retune it to a gentle rise-and-fade.
 */
@media (prefers-reduced-motion: no-preference) {
  #cc-main {
    --cc-modal-transition-duration: 0.5s;
  }

  #cc-main .cm,
  #cc-main .cc--anim.cm-wrapper:before {
    transition:
      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #cc-main .pm,
  #cc-main .cc--anim .pm-overlay {
    transition:
      opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #cc-main .toggle__icon {
    transition: background-color 0.25s ease;
  }

  #cc-main .toggle__icon-circle {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
  }
}

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

  #cc-main .cm,
  #cc-main .pm,
  #cc-main .cc--anim.cm-wrapper:before,
  #cc-main .cc--anim .pm-overlay,
  #cc-main .toggle__icon,
  #cc-main .toggle__icon-circle {
    transition: none;
  }
}