/* Tapmap – block editor */

.tapmap-ed__canvas {
	position: relative;
	line-height: 0;
	user-select: none;
	touch-action: none;
}

.tapmap-ed__canvas img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	pointer-events: none;
}

.tapmap-ed__canvas.is-tool-point,
.tapmap-ed__canvas.is-tool-rect {
	cursor: crosshair;
}

.tapmap-ed__area {
	position: absolute;
	--c: #7b61ff;
	line-height: 1.2;
	cursor: move;
}

.tapmap-ed__area.is-available { --c: #15803d; }
.tapmap-ed__area.is-reserved { --c: #a16207; }
.tapmap-ed__area.is-sold { --c: #b91c1c; }

.tapmap-ed__area--rect {
	border-radius: 6px;
	background: color-mix(in srgb, var(--c) 22%, transparent);
	box-shadow: inset 0 0 0 2px var(--c);
}

.tapmap-ed__area--point {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tapmap-ed__num {
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.tapmap-ed__label {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	line-height: 1.2;
	transform: translate(-50%, -50%);
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #16161d;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
}

.tapmap-ed__area.is-selected {
	outline: 2px dashed #16161d;
	outline-offset: 3px;
	z-index: 2;
}

.tapmap-ed__handle {
	position: absolute;
	right: -7px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: #fff;
	border: 2px solid #16161d;
	cursor: nwse-resize;
}

.tapmap-ed__draft {
	position: absolute;
	border: 2px dashed #16161d;
	background: rgba(123, 97, 255, 0.18);
	border-radius: 6px;
	pointer-events: none;
}

.tapmap-ed__hint {
	margin: 8px 0 0;
	font-size: 13px;
	color: #50575e;
}

.tapmap-ed__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 12px;
}

.tapmap-ed__list {
	margin: 0 0 0 1.2em;
}

/* Freeform shapes */
.tapmap-ed__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.tapmap-ed__poly {
	--c: #7b61ff;
	fill: color-mix(in srgb, var(--c) 24%, transparent);
	stroke: var(--c);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	pointer-events: all;
	cursor: move;
}

.tapmap-ed__poly.is-available { --c: #15803d; }
.tapmap-ed__poly.is-reserved { --c: #a16207; }
.tapmap-ed__poly.is-sold { --c: #b91c1c; }

.tapmap-ed__poly.is-selected {
	stroke: #16161d;
	stroke-width: 2.5;
	stroke-dasharray: 6 4;
}

.is-tool-point .tapmap-ed__poly,
.is-tool-rect .tapmap-ed__poly,
.is-tool-poly .tapmap-ed__poly,
.is-tool-point .tapmap-ed__area,
.is-tool-rect .tapmap-ed__area,
.is-tool-poly .tapmap-ed__area {
	pointer-events: none;
}

.tapmap-ed__drawing {
	fill: rgba(123, 97, 255, 0.15);
	stroke: #16161d;
	stroke-width: 2;
	stroke-dasharray: 6 4;
	vector-effect: non-scaling-stroke;
}

.tapmap-ed__vertex,
.tapmap-ed__dot {
	position: absolute;
	z-index: 3;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #16161d;
}

.tapmap-ed__vertex {
	cursor: grab;
}

.tapmap-ed__dot {
	pointer-events: none;
}

.tapmap-ed__dot.is-first {
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	background: #7b61ff;
	border-color: #fff;
	box-shadow: 0 0 0 2px #16161d;
}

.tapmap-ed__canvas:focus-visible {
	outline: 2px solid #3858e9;
	outline-offset: 4px;
}

.tapmap-ed__demos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.tapmap-ed__repeat {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #e0e0e0;
}

.tapmap-ed__subhead {
	margin: 0 0 4px;
	font-weight: 600;
}

.tapmap-ed__help {
	margin: 0 0 8px;
	font-size: 12px;
	color: #757575;
}

.tapmap-ed__grid .components-base-control:nth-child(3):last-child {
	grid-column: 1 / -1;
}

.tapmap-ed__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tapmap-ed__msg {
	margin: 10px 0 0;
	font-size: 13px;
}