/* v1.1
 * - Kept the leden add dialog animation and placement in the shared dialog stylesheet.
 * - Preserves the backdrop and action layout for the members chooser dialog.
 */
dialog.leden-toevoegen-dialog {
	position: fixed;
	top: clamp(24px, 8vh, 90px);
	left: 50%;
	margin: 0;
	padding: 24px 26px 22px;
	border: 0;
	border-radius: 18px;
	transform: translateX(-50%);
	max-width: min(92vw, 560px);
	width: calc(100vw - 32px);
	overflow: hidden;
	animation: leden_toevoegen_dialog_in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

dialog.leden-toevoegen-dialog::backdrop {
	background: rgba(0, 0, 0, 0.32);
}

dialog.leden-toevoegen-dialog .leden-toevoegen-dialog__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

dialog.leden-toevoegen-dialog .leden-toevoegen-dialog__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

dialog.leden-toevoegen-dialog .leden-toevoegen-dialog__footer {
	display: flex;
	justify-content: flex-end;
}

dialog.leden-toevoegen-dialog .button,
dialog.leden-toevoegen-dialog button {
	width: 100%;
	justify-content: center;
	padding: 12px 18px;
	font-size: 18px;
	line-height: 18px;
}

dialog.leden-toevoegen-dialog .leden-toevoegen-dialog__footer button {
	width: auto;
}

@keyframes leden_toevoegen_dialog_in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-42px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}