.wdl-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px;
	background: #fafafa;
	max-width: 640px;
}

.wdl-modes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 240px;
}

.wdl-mode-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
}

.wdl-mode-option input {
	margin: 0;
	flex-shrink: 0;
}

.wdl-panel {
	margin: 0;
	flex: 1 1 260px;
}

.wdl-grid-size {
	margin-bottom: 8px;
	font-size: 12px;
	color: #555;
}

.wdl-grid-size select {
	margin-left: 6px;
	padding: 2px 6px;
}

.wdl-note p {
	margin: 0;
	font-size: 13px;
	color: #555;
	background: #f0f4ff;
	border: 1px solid #dbe4ff;
	border-radius: 4px;
	padding: 8px 10px;
}

.wdl-grid {
	display: block;
	touch-action: none;
	user-select: none;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #eee;
}

.wdl-dot {
	fill: #ffffff;
	stroke: #c9c9c9;
	stroke-width: 3;
	cursor: pointer;
	transition: fill 0.1s ease, stroke 0.1s ease;
}

.wdl-dot:hover {
	stroke: #7ea3ff;
}

.wdl-dot.wdl-dot-selected {
	fill: #2b6cff;
	stroke: #2b6cff;
}

.wdl-dot.wdl-dot-start {
	fill: #22c55e;
	stroke: #22c55e;
}

.wdl-lines line {
	stroke: #2b6cff;
	stroke-width: 6;
	stroke-linecap: round;
}

/* High-specificity + !important: WordPress themes frequently apply global
   button/input resets (gradients, box-shadow, text-shadow, forced white text
   etc). Without overriding all of that explicitly, this button can end up
   looking broken or with invisible text depending on the page/theme context. */
.wdl-wrap button.wdl-reset {
	display: inline-block !important;
	margin-top: 10px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	padding: 6px 14px !important;
	border: none !important;
	background: #2b6cff !important;
	background-image: none !important;
	color: #ffffff !important;
	text-shadow: none !important;
	box-shadow: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-weight: 600 !important;
	text-transform: none !important;
}

.wdl-wrap button.wdl-reset:hover,
.wdl-wrap button.wdl-reset:focus {
	background: #1d54d1 !important;
	color: #ffffff !important;
}

.wdl-pin-input,
.wdl-password-input {
	width: 100%;
	max-width: 220px;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	font-size: 14px;
}

.wdl-static-svg circle,
.wdl-static-svg line,
.wdl-static-svg polygon {
	vertical-align: middle;
}

@media (max-width: 560px) {
	.wdl-wrap {
		flex-direction: column;
	}
	.wdl-modes {
		flex-basis: auto;
	}
}