/*
 * Koper Mollie Abonnementen — moderne stijl voor het aanmeldformulier
 * ([kma_aanmelden]), sinds v1.13.0. Puur CSS bovenop de bestaande inline
 * stijlen (daarom !important); gebruikt de --kp-* tokens van het thema,
 * dus light + dark. Geen wijziging in velden of werking.
 */
.kma-formulier {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.6rem 1.8rem;
	border: 1px solid var(--kp-border, #ddd);
	border-radius: 20px;
	background: var(--kp-bg-card, #fff);
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06));
}

/* Samenvatting "U meldt zich aan voor…" */
.kma-formulier > div[style*="background:var(--kp-bg-card)"] {
	border-radius: 14px !important;
	border: 1px solid color-mix(in srgb, var(--kp-primary, #00547e) 30%, var(--kp-border, #ddd)) !important;
	border-left: 4px solid var(--kp-primary, #00547e) !important;
	background: color-mix(in srgb, var(--kp-primary, #00547e) 7%, var(--kp-bg-card, #fff)) !important;
	box-shadow: none !important;
	padding: 1rem 1.2rem !important;
}

/* Foutmelding */
.kma-formulier > div[style*="rgba(200,0,0"] {
	border-radius: 14px !important;
	border-left: 4px solid #c00 !important;
}

/* Labels */
.kma-formulier form label { letter-spacing: .01em; }

/* Velden: gevuld, afgerond, focusring */
.kma-formulier input[type="text"],
.kma-formulier input[type="email"],
.kma-formulier input[type="tel"] {
	padding: .75rem 1rem !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	background: var(--kp-bg-alt, #e2e8f0) !important;
	color: var(--kp-text, #222) !important;
	-webkit-text-fill-color: var(--kp-text, #222);
	outline: none;
	transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kma-formulier input[type="text"]:focus,
.kma-formulier input[type="email"]:focus,
.kma-formulier input[type="tel"]:focus {
	border-color: var(--kp-primary, #00547e) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-primary, #00547e) 22%, transparent);
}
.kma-formulier input:user-invalid {
	border-color: rgba(255, 94, 94, .85) !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 0, .12);
}

/* Vinkje (machtiging) */
.kma-formulier input[type="checkbox"] {
	accent-color: var(--kp-primary, #00547e);
	width: 1.1rem; height: 1.1rem;
}
.kma-formulier label:has(input[type="checkbox"]) {
	padding: .9rem 1rem;
	border: 1px solid var(--kp-border, #ddd);
	border-radius: 14px;
	background: color-mix(in srgb, var(--kp-text, #222) 3%, transparent);
	line-height: 1.5;
}

/* Knoppen als pil */
.kma-formulier .kp-btn { border-radius: 99px; }
.kma-formulier button[type="submit"] { padding-left: 1.6rem; padding-right: 1.6rem; }

/* Smal scherm: velden onder elkaar */
@media (max-width: 520px) {
	.kma-formulier { padding: 1.2rem; border-radius: 16px; }
	.kma-formulier div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
	.kma-formulier div[style*="grid-template-columns"] input { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
	.kma-formulier input { transition: none; }
}