/*
 * Rutan "Jag är en människa" (3.013). Färgerna tas från formulärets
 * egna variabler när de finns (kontaktformuläret), annars neutrala.
 *
 * Statustexten ligger utanför <label>, så den inte blir en del av
 * rutans namn för skärmläsare.
 */
.kdmk {
	margin: 4px 0 18px;
}

.kdmk .kdmk-ruta {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 360px;
	padding: 12px 14px;
	border: 1px solid var(--kdc-line-strong, rgba(18, 24, 31, 0.28));
	border-radius: 4px;
	background: #fff;
	color: var(--kdc-ink, #12181F);
}

/* Formulärens egna regler (t.ex. "label { display: block }" och
 * "label > span { display: block }" i kontaktformuläret) ska inte slå
 * igenom i rutan. */
.kdmk .kdmk-ruta > label.kdmk-etikett {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.kdmk .kdmk-ruta > label.kdmk-etikett > span {
	display: inline;
	margin: 0;
	font-weight: inherit;
	letter-spacing: normal;
}

.kdmk .kdmk-bock {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	accent-color: var(--kdc-blue, #1E3A5F);
}

.kdmk .kdmk-ruta:focus-within {
	outline: 2px solid var(--kdc-blue, #1E3A5F);
	outline-offset: 2px;
}

.kdmk .kdmk-status {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--kdc-grey, #5B6B7A);
	white-space: nowrap;
}

.kdmk[data-kdmk="klar"] .kdmk-status {
	color: #1F7A4D;
}

.kdmk[data-kdmk="klar"] .kdmk-status:not(:empty)::before {
	content: "✓ ";
}

.kdmk[data-kdmk="fel"] .kdmk-status {
	color: #A3342B;
	white-space: normal;
}

.kdmk-utan-js,
.kdmk-reserv {
	margin: 8px 0 0;
	font-size: 14px;
	color: #A3342B;
}

/* Skicka innan rutan är klar: gråad men nåbar (aria-disabled). */
form button[aria-disabled="true"],
form input[type="submit"][aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}