/**
 * Klaro consent UI — brand colors for theme deal.
 *
 * ACTIVE: v4 neutral gray (no warm/cool brand tint)
 *
 * Previous trials kept for reference:
 *   v1 coral CTA #d24b3d | v2 burgundy #7f3d46 | v3 muted #5c4a4a + coral Accept
 */

.klaro.klaro-theme-deal {
  --deal-klaro-accent: #5c5c5c;
  --deal-klaro-accent-hover: #3d3d3d;
  --deal-klaro-accent-soft: #8a8a8a;

  --klaro-primary-color: var(--deal-klaro-accent);
  --klaro-link-color: var(--deal-klaro-accent);
  --klaro-link-color-hover: var(--deal-klaro-accent-hover);
  --klaro-button-bg: var(--deal-klaro-accent);
  --klaro-button-text-color: #fff;
  --klaro-button-border: 1px solid var(--deal-klaro-accent);
  --klaro-button-border-radius: 3px;
  --klaro-button-padding: 0.5rem 1rem;
  --klaro-button-bg-hover: #fff;
  --klaro-button-text-color-hover: var(--deal-klaro-accent);
  --klaro-button-border-hover: 1px solid var(--deal-klaro-accent);
  --klaro-button-focus-outline: 2px solid var(--deal-klaro-accent-soft);
  --klaro-slider-bg-active: var(--deal-klaro-accent);
  --klaro-slider-bg-required: var(--deal-klaro-accent);
  --green1: var(--deal-klaro-accent);
  --green2: var(--deal-klaro-accent);
  --green3: var(--deal-klaro-accent);
  --dark2: var(--deal-klaro-accent);
  --font-family: "Manrope", sans-serif;
}

/* Accept / Decline / all primary actions — same gray family (no coral) */
.klaro.klaro-theme-deal .cookie-notice .cm-btn.cm-btn-success,
.klaro.klaro-theme-deal .cookie-modal .cm-btn.cm-btn-success {
  --klaro-button-bg: #5c5c5c;
  --klaro-button-border: 1px solid #5c5c5c;
  background-color: #5c5c5c;
  border-color: #5c5c5c;
  color: #fff;
}

.klaro.klaro-theme-deal .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro.klaro-theme-deal .cookie-modal .cm-btn.cm-btn-success:hover {
  background-color: #fff;
  color: #5c5c5c;
  border-color: #5c5c5c;
}

/**
 * Floating privacy toggle (shield/lock icon).
 * Module default SVG is black paths on white; we force a gray disc + white glyph.
 * Bottom-left so it does not clash with Compare Advisor’s “Open compare” (bottom-right).
 */
.klaro_toggle_dialog,
.klaro_toggle_dialog.klaro_toggle_dialog_override {
  right: auto;
  left: 1rem;
  bottom: 1rem;
}

.klaro_toggle_dialog.klaro_toggle_dialog_override {
  border: 1px solid #6b6b6b;
  background-color: #6b6b6b;
  background-image: url("../images/klaro-privacy-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.klaro_toggle_dialog.klaro_toggle_dialog_override:hover,
.klaro_toggle_dialog.klaro_toggle_dialog_override:focus {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
}