/* Signature Field for Event Tickets Plus */

/* Keep the underlying input in the DOM but out of view. */
.etpsig-hidden-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.etpsig-wrap {
	margin-top: 6px;
	max-width: 100%;
}

.etpsig-canvas {
	display: block;
	width: 100%;
	background: #fff;
	background-image:
		linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
	background-size: 22px 22px;
	border: 1px solid #c7ccd1;
	border-radius: 6px;
	cursor: crosshair;
	touch-action: none; /* stop the page scrolling while signing on touch devices */
}

.etpsig-canvas:focus,
.etpsig-canvas:hover {
	border-color: #8a9199;
}

.etpsig-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.etpsig-btn {
	appearance: none;
	-webkit-appearance: none;
	background: #f3f4f6;
	color: #1f2933;
	border: 1px solid #c7ccd1;
	border-radius: 5px;
	padding: 5px 12px;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
}

.etpsig-btn:hover {
	background: #e8eaed;
}

.etpsig-btn:active {
	transform: translateY(1px);
}

.etpsig-error {
	color: #b3261e;
	font-size: 13px;
	margin-left: 2px;
}

/* Admin previews */
.etpsig-admin-thumb {
	display: inline-block;
	line-height: 0;
}

.etpsig-admin-thumb img {
	max-width: 220px;
	max-height: 90px;
	height: auto;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 2px;
}

.etpsig-admin-thumb--inline {
	margin-top: 4px;
}