/*
 * Karaoke-zoekblok (plugin karaoke-request, klassen "kr-") in het donkere thema.
 *
 * De plugin is opgebouwd met CSS-variabelen (--kr-*); die worden hier op de
 * donkere kleuren gezet. Wat de plugin niet via een variabele regelt (veldkleuren,
 * badges, meldingen) staat eronder, met "body" ervoor zodat het wint van de
 * plugin-CSS. De plugin zelf blijft ongewijzigd.
 */

body {
	--kr-border: var(--wp--preset--color--accent);
	--kr-radius: 12px;
	--kr-radius-sm: 999px;
	--kr-radius-lg: 18px;
	--kr-accent: var(--wp--preset--color--accent-5);
	--kr-accent-hover: var(--wp--preset--color--accent-2);
	--kr-accent-disabled: #8a3a68;
	--kr-on-accent: var(--wp--preset--color--base);
	--kr-focus-ring: rgba(255, 79, 163, 0.3);
	--kr-surface: var(--wp--preset--color--base-2);
	--kr-surface-alt: #262b5c;
	--kr-text: var(--wp--preset--color--contrast);
	--kr-muted: #aab0e0;
	--kr-row-hover: rgba(255, 79, 163, 0.1);
	--kr-hot: rgba(100, 100, 100, 0.25);
	--kr-hot-hover: rgba(225, 225, 225, 0.25);
	--kr-panel: var(--wp--preset--color--base);
	--kr-panel-border: var(--wp--preset--color--accent);
}

/* Native keuzelijst, vinkjes en radio's in de donkere variant. */
body :is(.kr-karaoke-search, .kr-modal-backdrop) {
	color-scheme: dark;
}

/* ---------- Velden ---------- */

body .kr-search-input,
body .kr-select,
body .kr-name-input,
body .kr-email-input,
body .kr-lang-pref {
	background-color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--contrast-3);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
}

body .kr-search-input::placeholder,
body .kr-name-input::placeholder,
body .kr-email-input::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: 1;
}

body .kr-search-input:focus,
body .kr-select:focus,
body .kr-name-input:focus,
body .kr-email-input:focus,
body .kr-lang-pref:focus {
	border-color: var(--wp--preset--color--accent-5);
}

/* In het venster (modal) zijn de velden donkerder dan het venster zelf. */
body .kr-modal .kr-name-input,
body .kr-modal .kr-email-input,
body .kr-modal .kr-lang-pref {
	background-color: var(--wp--preset--color--base);
}

body .kr-select option {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Tabel ---------- */

body .kr-table thead th {
	color: var(--wp--preset--color--contrast-2);
}

body .kr-td-title,
body .kr-td-artist {
	color: var(--wp--preset--color--contrast);
}

body .kr-fav-heading {
	color: var(--wp--preset--color--accent-4);
}

/* ---------- Badges en labels ---------- */

body .kr-badge-hot {
	background: rgba(255, 154, 60, 0.18);
	border-color: rgba(255, 154, 60, 0.55);
	color: var(--wp--preset--color--accent-4);
}

body .kr-tag--duo {
	background: rgba(77, 141, 255, 0.22);
	color: #b3cdff;
}

body .kr-tag--explicit {
	background: rgba(255, 111, 125, 0.22);
	color: #ffb8bf;
}

/* ---------- Knoppen ---------- */

body .kr-request-btn,
body .kr-btn,
body .kr-page-btn {
	font-family: inherit;
}

body .kr-btn-secondary {
	background: #2e3470;
	color: var(--wp--preset--color--contrast);
}

body .kr-btn-secondary:hover {
	background: #3a4088;
}

body .kr-page-btn {
	background: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

body .kr-page-btn--active {
	background: var(--wp--preset--color--accent-5);
	border-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--base);
}

/* ---------- Venster (modal) ---------- */

body .kr-modal-backdrop {
	background: rgba(8, 10, 24, 0.78);
}

body .kr-modal {
	border: 1px solid var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--lifted);
	color: var(--wp--preset--color--contrast);
}

body .kr-label,
body .kr-modal-title,
body .kr-stay-informed-label,
body .kr-radio-label {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Meldingen ---------- */

body .kr-msg--error,
body .kr-modal-error {
	color: #ffb8bf;
}

body .kr-required {
	color: var(--wp--preset--color--accent-3);
}

body .kr-modal-success {
	color: #9be8b8;
}

body .kr-rate-banner--warning {
	background: rgba(255, 154, 60, 0.14);
	border-color: rgba(255, 154, 60, 0.5);
	color: #ffc88a;
}

body .kr-rate-banner--blocked {
	background: rgba(255, 111, 125, 0.14);
	border-color: rgba(255, 111, 125, 0.55);
	color: #ffb8bf;
}