/* ================================================================
 *  Route Guide — Floating tooltip tour
 *  Uses var(--mot-*, fallback) for standalone compatibility.
 * ============================================================= */

/* ── Tooltip bubble ─────────────────────────────────────────────── */
.mrm-guide {
	position: fixed;
	z-index: 10000;
	width: 280px;
	padding: 16px;
	background: var(--mot-bg-card, #1f1f1f);
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius, 10px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
	font-family: var(--mot-font, system-ui, -apple-system, sans-serif);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.mrm-guide--visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── Arrow ──────────────────────────────────────────────────────── */
.mrm-guide__arrow {
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--mot-bg-card, #1f1f1f);
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	transform: rotate(45deg);
}

/* Arrow positions — set by JS via data-pos attribute */
.mrm-guide[data-pos="bottom"] .mrm-guide__arrow {
	top: -7px;
	left: 50%;
	margin-left: -6px;
	border-right: none;
	border-bottom: none;
}
.mrm-guide[data-pos="top"] .mrm-guide__arrow {
	bottom: -7px;
	left: 50%;
	margin-left: -6px;
	border-left: none;
	border-top: none;
}
.mrm-guide[data-pos="left"] .mrm-guide__arrow {
	right: -7px;
	top: 24px;
	border-left: none;
	border-bottom: none;
}
.mrm-guide[data-pos="right"] .mrm-guide__arrow {
	left: -7px;
	top: 24px;
	border-right: none;
	border-top: none;
}
.mrm-guide[data-pos="center"] .mrm-guide__arrow {
	display: none;
}

/* ── Content ────────────────────────────────────────────────────── */
.mrm-guide__title {
	margin: 0 0 6px;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--mot-text, #f2f2f2);
}

.mrm-guide__text {
	margin: 0 0 14px;
	font-size: .8125rem;
	color: var(--mot-text-muted, #9b9b9b);
	line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.mrm-guide__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mrm-guide__counter {
	font-size: .75rem;
	color: var(--mot-text-muted, #9b9b9b);
}

.mrm-guide__btns {
	display: flex;
	gap: 6px;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.mrm-guide__btn {
	padding: 5px 12px;
	border: none;
	border-radius: var(--mot-radius-sm, 6px);
	font-family: var(--mot-font, system-ui, -apple-system, sans-serif);
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--mot-transition, .18s ease);
}

.mrm-guide__btn--skip,
.mrm-guide__btn--back {
	background: none;
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-guide__btn--skip:hover,
.mrm-guide__btn--back:hover {
	color: var(--mot-text, #f2f2f2);
	background: var(--mot-bg-raised, #2a2a2a);
}

.mrm-guide__btn--next {
	background: var(--mot-accent, #ff6b35);
	color: #fff;
}
.mrm-guide__btn--next:hover {
	filter: brightness(1.1);
}

/* ── Target highlight (pulse outline — no position/z-index changes) ── */
.mrm-guide-target {
	outline: 3px solid rgba(255, 107, 53, .6) !important;
	outline-offset: 3px;
	border-radius: var(--mot-radius-sm, 6px);
	animation: mrm-guide-pulse 2s ease-in-out infinite;
}

@keyframes mrm-guide-pulse {
	0%, 100% { outline-color: rgba(255, 107, 53, .6); }
	50%      { outline-color: rgba(255, 107, 53, .25); }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 959px) {
	.mrm-guide {
		width: 240px;
		padding: 14px;
	}
	.mrm-guide__title {
		font-size: .875rem;
	}
	.mrm-guide__text {
		font-size: .75rem;
	}
}