/*
 * Koper Subnet Calculator — moderne laag (sinds v1.1.3). Laadt na
 * koper-subnet-calculator.css en overschrijft alleen het uiterlijk:
 * kaart, gevulde afgeronde velden, pil-keuzes, focusring. Gebruikt de
 * --kp-* tokens van het thema (light + dark). Rekenlogica ongewijzigd.
 */
.koper-subnet-calculator .ksc-shell {
	padding: 1.8rem 2rem;
	background: var(--kp-bg-card, #fff);
	border: 1px solid var(--kp-border, #ddd);
	border-radius: 20px;
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06));
}

/* Invoervelden: gevuld, afgerond, focusring */
body .koper-subnet-calculator input[type="text"],
body .koper-subnet-calculator select {
	border-radius: 12px !important;
	border: 1px solid transparent !important;
	background-color: var(--kp-bg-alt, #e2e8f0) !important;
	padding: .75rem 1rem !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
}
body .koper-subnet-calculator select { padding-right: 2.6rem !important; }
body .koper-subnet-calculator input[type="text"]:focus,
body .koper-subnet-calculator select:focus {
	border-color: var(--kp-primary, #00547e) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-primary, #00547e) 22%, transparent) !important;
}
body .koper-subnet-calculator input[type="text"]:invalid,
body .koper-subnet-calculator select:invalid { border-color: transparent !important; }

/* Uitkomsten: rustige, getinte velden */
body .koper-subnet-calculator output {
	border-radius: 12px !important;
	border: 1px solid color-mix(in srgb, var(--kp-primary, #00547e) 22%, transparent) !important;
	background-color: color-mix(in srgb, var(--kp-primary, #00547e) 8%, var(--kp-bg-card, #fff)) !important;
	padding: .75rem 1rem !important;
}
body .ksc-bitmap {
	border-radius: 12px !important;
	border: 1px solid var(--kp-border, #ddd) !important;
	background-color: color-mix(in srgb, var(--kp-text, #222) 4%, var(--kp-bg-card, #fff)) !important;
}

/* Labels */
.koper-subnet-calculator .ksc-field label { font-size: 14px; letter-spacing: .01em; }

/* Netwerkklasse als pil-keuze */
.koper-subnet-calculator .ksc-radio-row { gap: 10px; padding: 0; }
.koper-subnet-calculator .ksc-radio-row label {
	padding: .5rem 1.1rem;
	border: 1px solid var(--kp-border, #ddd);
	border-radius: 99px;
	background: var(--kp-bg-alt, #f1f5f9);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.koper-subnet-calculator .ksc-radio-row label:hover { border-color: var(--kp-primary, #00547e); }
.koper-subnet-calculator .ksc-radio-row label:has(input:checked) {
	border-color: var(--kp-primary, #00547e);
	background: color-mix(in srgb, var(--kp-primary, #00547e) 14%, var(--kp-bg-card, #fff));
	color: var(--kp-primary, #00547e);
}

/* Scheiding tussen invoer en resultaten */
.koper-subnet-calculator .ksc-results {
	margin-top: 1.6rem; padding-top: 1.6rem;
	border-top: 1px solid var(--kp-border, #ddd);
}

/* Foutmelding */
.koper-subnet-calculator .ksc-error {
	border-radius: 14px;
	border-left: 4px solid #c00;
}

@media (max-width: 720px) {
	.koper-subnet-calculator .ksc-shell { padding: 1.2rem; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	body .koper-subnet-calculator input, body .koper-subnet-calculator select,
	.koper-subnet-calculator .ksc-radio-row label { transition: none !important; }
}