/**
 * Guided tour (evq-tour.js). The spotlight is one fixed box positioned over
 * the current target; its enormous box-shadow is what dims everything else,
 * so the cut-out is the box itself — no canvas, no second overlay.
 */

.evq-tour-spot {
	position: fixed;
	z-index: 1200;
	border-radius: 10px;
	box-shadow: 0 0 0 9999px rgba( 8, 14, 26, 0.62 ), 0 0 0 3px rgba( 107, 155, 255, 0.9 );
	pointer-events: none;
	transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
	display: none;
}

.evq-tour-card {
	position: fixed;
	z-index: 1201;
	width: 340px;
	max-width: calc( 100vw - 24px );
	box-sizing: border-box;
	padding: 16px 18px 14px;
	border-radius: 12px;
	background: var( --evq-bg, #fff );
	color: var( --evq-text, #1f2430 );
	box-shadow: 0 18px 48px rgba( 0, 0, 0, 0.32 );
	display: none;
	font-size: 14px;
	line-height: 1.5;
}

.evq-tour-card.is-centered {
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 420px;
}

body.evq-tour-active .evq-tour-spot,
body.evq-tour-active .evq-tour-card {
	display: block;
}

.evq-tour-card-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 6px;
	letter-spacing: -0.01em;
}

.evq-tour-card-body {
	margin-bottom: 14px;
	color: var( --evq-text, #1f2430 );
}

.evq-tour-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.evq-tour-progress {
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
}

.evq-tour-buttons {
	display: flex;
	gap: 6px;
}