/* Define Klaro variables based on your theme */
.klaro {
  /* Map theme colors to Klaro color variables */
  --dark1: var(--color-raisin-black, #1d1e2c); /* Modal/Notice background */
  --dark2: var(--color-paynes-gray, #59656f); /* Borders on dark bg, default buttons, secondary text */
  --dark3: var(--color-timberwolf, #d7cdcc); /* List descriptions */
  --light1: var(--color-platinum, #ffffff); /* Text on dark bg */
  --light2: var(--color-timberwolf, #d7cdcc); /* Borders on light bg, close button bg */
  --light3: var(--color-paynes-gray, #59656f); /* Secondary text in modal */

  /* Map theme accent/status colors */
  /* --green1 is now the primary accent/link color */
  --green1: #4db6ac; /* NEW ACCENT/LINK COLOR (Example: Teal - Change if needed) */
  --green2: var(--color-paynes-gray, #59656f); /* Required/less prominent switch bg, links on light */
  /* --green3 (focus) matches new accent */
  --green3: #4db6ac; /* UPDATED FOCUS SHADOW TO MATCH NEW ACCENT */
  --blue1: var(--color-paynes-gray, #59656f); /* Info buttons (using gray as no direct blue match) */
  /* --blue2 is links on dark background - matches new accent */
  --blue2: #4db6ac; /* UPDATED LINKS ON DARK BG TO MATCH NEW ACCENT */

  /* Switch 'off' state colors */
  /* --white2 Switch slider background (off) is now Payne's Gray */
  --white2: var(--color-paynes-gray, #59656f); /* <--- UPDATED SLIDER BACKGROUND (OFF STATE) */
  --white3: var(--color-platinum, #ffffff); /* Switch slider knob (off) - Remains white */

  /* Button text color (remains white) */
  --button-text-color: var(--color-platinum, #ffffff);

  /* Font settings */
  --font-family: var(--font-family-sans, 'Arial', sans-serif);
  --title-font-family: var(--font-family-sans, 'Arial', sans-serif);
  --font-size: var(--font-size-base, 16px); /* Using your base size */

  /* Border settings */
  --border-radius: var(--border-radius-small, 4px);
  --border-width: 1px; /* Default seems fine */
  --border-style: solid; /* Default seems fine */

  /* Box shadow color for focus (Matches new accent) */
  --box-shadow-color: #4db6ac; /* UPDATED BOX SHADOW TO MATCH NEW ACCENT */

  /* --- Optional notice positioning --- */
  /*
  --notice-position: fixed;
  --notice-right: 20px;
  --notice-left: auto;
  --notice-bottom: 20px;
  --notice-top: auto;
  --notice-max-width: 400px;
  */
}

/* Override specific styles not controlled by variables */

/* Force ALL "Accept All" buttons background to plum */
.klaro .cm-btn-accept-all {
  background-color: var(--color-plum, #9c528b) !important;
  color: var(--button-text-color, #ffffff) !important;
}
.klaro .cm-btn-success {
  background-color: var(--color-plum, #9c528b) !important;
  color: var(--button-text-color, #ffffff) !important;
}

/* Ensure focus state for Accept All uses plum shadow */
.klaro .cm-btn-accept-all:focus {
  box-shadow: 0 0 0 2px var(--dark1, #1d1e2c), 0 0 0 4px var(--color-plum, #9c528b) !important;
}

/* Change purpose description text color */
.klaro .cm-purpose div[id$="-description"] p {
  color: var(--dark3, #d7cdcc) !important;
}

/* --- CHANGE "Powered by" TEXT COLOR (Example: Match Purpose Descriptions) --- */
.klaro .cm-powered-by,     /* Target the container (if it has the class) */
.klaro .cm-powered-by a  /* Target the link inside the container */ {
  color: var(--dark3, #d7cdcc) !important; /* Use Timberwolf */
}

/* Apply theme shadows */
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-notice:not(.cookie-modal-notice) {
  box-shadow: var(--shadow-medium, 0 4px 8px rgba(0, 0, 0, 0.1));
}

.klaro .cookie-modal .slider,
.klaro .context-notice .slider,
.klaro .cookie-notice .slider {
  box-shadow: var(--shadow-small, 0 2px 4px rgba(0, 0, 0, 0.1)); /* Lighter shadow for slider */
}

/* Use the new accent color for the focus shadow on switches */
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:focus + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider {
  /* Use theme shadow medium combined with the NEW accent color for focus */
  box-shadow: 0 0 0 2px var(--dark1, #1d1e2c), 0 0 0 4px var(--green3, #4db6ac); /* Use the updated --green3 */
}


/* Apply theme transitions */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider,
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  transition: var(--transition-medium, 0.3s); /* Using theme transition speed */
}

/* Apply theme button radius */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  border-radius: var(--border-radius-small, 4px);
}

/* Adjust switch slider knob size slightly if needed (example) */
/*
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
*/

/* --- Include the original Klaro CSS after these overrides --- */
/* .klaro{font-family:inherit;font-family:var(--font-family, inherit); ... etc ... } */