/**
 * bny-tour.css — styling for the lightweight guided-tour engine (bny-tour.js).
 * Themed with the Banooyi tokens; RTL-first; responsive (bottom sheet on phones).
 */

.bny-tour-overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: transparent;
}
.bny-tour-overlay.is-dim {
	background: rgba(17, 12, 38, 0.55);
}

.bny-tour-spot {
	position: fixed;
	z-index: 99991;
	border-radius: 14px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 9999px rgba(17, 12, 38, 0.55), 0 0 0 4px rgba(124, 58, 237, 0.5);
	pointer-events: none;
	transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.bny-tour-pop {
	position: fixed;
	z-index: 99999;
	box-sizing: border-box;
	width: min(342px, calc(100vw - 24px));
	background: var(--color-surface, #fff);
	color: var(--color-text, #1c1230);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(17, 12, 38, 0.32);
	padding: 18px 18px 14px;
	font-family: var(--font-body, sans-serif);
	direction: rtl;
	text-align: right;
	animation: bny-tour-in 0.16s ease both;
}
@keyframes bny-tour-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bny-tour-pop.is-bottom {
	inset-inline: 12px;
	left: 12px;
	right: 12px;
	top: auto !important;
	bottom: 12px;
	width: auto;
	border-radius: 20px 20px 16px 16px;
}

.bny-tour-title {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.5;
	margin: 0 0 7px;
	padding-inline-end: 30px;
}
.bny-tour-text {
	font-size: 13px;
	line-height: 1.95;
	color: var(--color-text-soft, #6b647d);
}
.bny-tour-text b { color: var(--color-text, #1c1230); }

.bny-tour-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
}
.bny-tour-prog {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-soft, #6b647d);
	white-space: nowrap;
}
.bny-tour-btns { display: flex; gap: 8px; }

.bny-tour-prev {
	height: 40px;
	padding: 0 15px;
	border-radius: 12px;
	border: 1.5px solid var(--color-border, #e6e2ee);
	background: var(--color-surface, #fff);
	color: var(--color-text, #1c1230);
	font-family: var(--font-body, sans-serif);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
}
.bny-tour-next {
	height: 40px;
	padding: 0 20px;
	border-radius: 12px;
	border: none;
	background: var(--gradient-brand, #7c3aed);
	color: #fff;
	font-family: var(--font-body, sans-serif);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(124, 58, 237, 0.26);
}

.bny-tour-x {
	position: absolute;
	top: 12px;
	inset-inline-end: 14px;
	width: 28px;
	height: 28px;
	border: none;
	background: var(--color-primary-100, #f1ecff);
	color: var(--color-primary-deep, #5b21b6);
	border-radius: 9px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.bny-tour-arrow {
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--color-surface, #fff);
	transform: rotate(45deg);
	display: none;
}
.bny-tour-arrow.is-up { top: -7px; }      /* popover below the target */
.bny-tour-arrow.is-down { bottom: -7px; } /* popover above the target */

/* The launcher pill injected into each wizard header. */
.bny-tour-help {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 14px;
	border: 1.5px solid var(--color-primary-200, #d9ccff);
	border-radius: 999px;
	background: var(--color-primary-100, #f1ecff);
	color: var(--color-primary-deep, #5b21b6);
	font-family: var(--font-body, sans-serif);
	font-weight: 700;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}
.bny-tour-help svg { flex: none; }

@media (max-width: 600px) {
	.bny-tour-help {
		height: 34px;
		padding: 0 11px;
		font-size: 12px;
	}
	.bny-tour-help .bny-tour-help-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bny-tour-spot { transition: none; }
	.bny-tour-pop { animation: none; }
}