/* Centrale bevestig-/meldingsdialoog (assets/dialoog.js). Zelfstandige stijl
   die in site, klantportaal en beheer past; nachtstand via [data-thema]. */
.wd-dialoog {
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px 18px;
	max-width: 420px;
	width: calc(100vw - 48px);
	background: #fff;
	color: #1e293b;
	box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
	/* Nooit hoger dan het scherm: lange teksten scrollen binnen de dialoog,
	   anders vallen de knoppen onderaan buiten beeld (mobiel). */
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}
/* Mobiel: invoer >= 16px, anders zoomt iOS Safari in bij focus. */
@media (max-width: 640px) {
	.wd-dialoog .wd-invoer { font-size: 16px; }
}
.wd-dialoog::backdrop {
	background: rgba(15, 23, 42, .45);
}
.wd-dialoog .wd-titel {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}
.wd-dialoog .wd-tekst {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #475569;
	white-space: pre-line;
	overflow-wrap: break-word;
}
.wd-dialoog .wd-voet {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}
.wd-dialoog .wd-knop {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 9px;
	padding: 9px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.wd-dialoog .wd-knop:focus-visible {
	outline: 2px solid #3e5aa1;
	outline-offset: 2px;
}
.wd-dialoog .wd-knop-stil {
	background: #f1f5f9;
	border-color: #e2e8f0;
	color: #334155;
}
.wd-dialoog .wd-knop-stil:hover {
	background: #e2e8f0;
}
.wd-dialoog .wd-knop-primair {
	background: #3e5aa1;
	color: #fff;
}
.wd-dialoog .wd-knop-primair:hover {
	background: #33497f;
}
.wd-dialoog .wd-knop-primair.wd-knop-gevaar {
	background: #b91c1c;
}
.wd-dialoog .wd-knop-primair.wd-knop-gevaar:hover {
	background: #991b1b;
}

[data-thema="donker"] .wd-dialoog {
	background: #1f2937;
	border-color: #374151;
	color: #e5e7eb;
}
[data-thema="donker"] .wd-dialoog .wd-tekst {
	color: #cbd5e1;
}
[data-thema="donker"] .wd-dialoog .wd-knop-stil {
	background: #374151;
	border-color: #4b5563;
	color: #e5e7eb;
}
[data-thema="donker"] .wd-dialoog .wd-knop-stil:hover {
	background: #4b5563;
}

.wd-dialoog .wd-invoer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: -6px 0 18px;
	padding: 9px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 9px;
	font: inherit;
	font-size: 14.5px;
	color: inherit;
	background: #fff;
}
.wd-dialoog .wd-invoer:focus-visible {
	outline: 2px solid #3e5aa1;
	outline-offset: 1px;
}
[data-thema="donker"] .wd-dialoog .wd-invoer {
	background: #111827;
	border-color: #4b5563;
}