/**
 * Tekenvlak voor de SEPA-machtiging.
 */

.alcides-handtekening {
	width: 100%;
}

.alcides-handtekening__canvas {
	display: block;
	width: 100%;
	height: 160px;
	background: #fff;
	border: 1px solid #b7b7b7;
	border-radius: 3px;
	cursor: crosshair;

	/* Zonder dit scrollt de pagina mee zodra iemand op een telefoon tekent. */
	touch-action: none;
}

.alcides-handtekening.is-getekend .alcides-handtekening__canvas {
	border-color: #2e7d32;
}

.alcides-handtekening__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-top: 0.4em;
}

.alcides-handtekening__hint {
	font-size: 0.85em;
	line-height: 1.3;
	color: #6b6b6b;
}

.alcides-handtekening.is-getekend .alcides-handtekening__hint {
	visibility: hidden;
}

.alcides-handtekening__wissen {
	flex: none;
	padding: 0.3em 0.9em;
	font-size: 0.85em;
	color: #444;
	cursor: pointer;
	background: transparent;
	border: 1px solid #b7b7b7;
	border-radius: 3px;
}

.alcides-handtekening__wissen:hover,
.alcides-handtekening__wissen:focus-visible {
	color: #111;
	border-color: #767676;
}

@media ( max-width: 480px ) {
	.alcides-handtekening__canvas {
		height: 130px;
	}
}