#signatureCanvas {
	transform: rotate(0deg);
	transform-origin: top left;
	touch-action: none; /* Prevent scrolling when drawing */
}

#landscape-block {
	display: none; /* hidden by default */
	position: fixed;
	inset: 0;
	background: white;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

#landscape-block.visible {
	display: flex;
}

.rotate-message {
	padding: 20px;
}

@media (max-width: 1000px) { /* phones only 768*/

	/* Option 2: block landscape completely and show message */
	@media (orientation: landscape) {
		body::before {
			content: "Please rotate your device to portrait";
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: white;
			color: black;
			font-size: 1.5rem;
			text-align: center;
			z-index: 9999;
		}

		/*body > * {
			display: none;
		}*/
	}
}