/*
 * Defaults for every --oms-tour-* custom property are supplied as the
 * second argument of var() at each usage site below, NOT as a block
 * declared here on .oms-tour. Elementor's per-instance Style tab
 * overrides are written to the *ancestor* .elementor-element-{id}
 * wrapper so they can cascade down via inheritance; declaring a
 * same-named default directly on this element (a descendant of that
 * wrapper) would take precedence over the inherited value at this exact
 * element regardless of the ancestor rule's specificity, silently
 * breaking every custom-property-based Style control on this widget
 * (panel ratio/gap, step colors, number badge colors, progress colors,
 * media aspect ratio). Do not add a defaults block here.
 */

.oms-tour {
	display: grid;
	grid-template-columns: var(--oms-tour-columns, 1fr 1fr);
	gap: var(--oms-tour-gap, 48px);
	align-items: start;
}

/* ------------------------------------------------------------ */
/* Steps panel                                                   */
/* ------------------------------------------------------------ */

.oms-tour__panel--steps {
	box-sizing: border-box;
	padding: 18px 0 32px;
	background-color: #f7f7f8;
}

/*
 * Compound selector is deliberate, same reason as the .oms-tour__step
 * list-style fix above: this theme's global `body.orbit p` reset sets a
 * 30px bottom margin with higher specificity (b:1,c:2) than a single
 * class here (b:1,c:0) would have, since <p> is what this element
 * actually is. Two classes (b:2) beats it regardless of c. Don't
 * simplify this back to `.oms-tour__panel-title`.
 */
.oms-tour__panel--steps .oms-tour__panel-title {
	margin: 0;
	padding: 0 28px 10px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oms-tour-step-color-inactive, #6b6b76);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.oms-tour__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/*
 * The compound selector (rather than the plain .oms-tour__step class
 * alone) is deliberate: the theme's global `body.orbit ul li` reset
 * carries higher specificity (b:1,c:3) than a single class selector
 * (b:1,c:0) despite matching the same element, so a bare class rule here
 * would silently lose the list-style-none override and show bullets.
 * Two classes (b:2) beats it outright regardless of c. Don't simplify
 * this back to `.oms-tour__step`.
 */
.oms-tour__steps .oms-tour__step {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	list-style: none;
	padding-left: 28px;
	padding-right: 28px;
	border-left: 4px solid transparent;
	transition: border-color 0.2s ease;
}

.oms-tour__step.is-active {
	border-left-color: var(--oms-tour-number-bg-active, #8017e1);
	background-color: #ffffff;
}

/* Connector line + arrowhead reaching toward the media panel. Both are
   sized/positioned off the *same* --oms-tour-gap custom property the grid
   itself uses for the column gap, so they always scale with the gap
   instead of a fixed pixel guess. A 5px clearance is left on each side
   (against the step's edge and against the media panel's edge) rather
   than running fully edge-to-edge.

   The line's width stops exactly at the arrowhead's flat back edge (gap
   minus the 5px trailing clearance minus the arrowhead's own 14px
   length), NOT at its tip - the tip is a single point with zero height,
   so a constant-height line running all the way to it pokes out past the
   tapering triangle outline instead of terminating cleanly inside it. */
.oms-tour__step.is-active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(100% + 5px);
	width: calc(var(--oms-tour-gap, 48px) - 24px);
	height: 3px;
	background: var(--oms-tour-number-bg-active, #8017e1);
	transform: translateY(-50%);
	pointer-events: none;
}

.oms-tour__step.is-active::before {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(100% + var(--oms-tour-gap, 48px) - 19px);
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid var(--oms-tour-number-bg-active, #8017e1);
	transform: translateY(-50%);
	pointer-events: none;
}

.oms-tour__step-trigger {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	column-gap: 16px;
	width: 100%;
	padding: 16px 0;
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	appearance: none;
}

.oms-tour__step-trigger:focus-visible {
	outline: 2px solid var(--oms-tour-number-bg-active, #8017e1);
	outline-offset: 2px;
}

.oms-tour__step-number {
	grid-row: 1 / 3;
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 0.8em;
	font-weight: 600;
	background: var(--oms-tour-number-bg-inactive, #ece3fb);
	color: #8017e1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.oms-tour__step.is-active .oms-tour__step-number {
	background: var(--oms-tour-number-bg-active, #8017e1);
	color: #fff;
}

.oms-tour__step-copy {
	grid-row: 1;
	grid-column: 2;
	min-width: 0;
}

.oms-tour__step-title {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--oms-tour-step-color-inactive, #6b6b76);
	transition: color 0.2s ease;
}

.oms-tour__step-body {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--oms-tour-step-color-inactive, #6b6b76);
	opacity: 0.8;
	transition: color 0.2s ease;
}

.oms-tour__step.is-active .oms-tour__step-title,
.oms-tour__step.is-active .oms-tour__step-body {
	color: var(--oms-tour-step-color-active, #111114);
}

.oms-tour__step-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--oms-tour-progress-track, rgba(0, 0, 0, 0.04));
	overflow: hidden;
}

.oms-tour__step-progress-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--oms-tour-progress-fill, rgba(128, 23, 225, 0.35));
	transform-origin: left center;
	transform: scaleX(0);
}

.oms-tour__cta {
	display: block;
	width: fit-content;
	margin: 24px auto 0;
	padding: 12px 28px;
	background: var(--oms-tour-number-bg-active, #8017e1);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}

/* ------------------------------------------------------------ */
/* Media panel                                                   */
/* ------------------------------------------------------------ */

.oms-tour__panel--media {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: var(--oms-tour-aspect, 16 / 9);
	overflow: hidden;
	background: #0e0e12;
}

/*
 * .oms-tour__media-item is the shared positioning/crossfade class for both
 * image steps (an <img> IS this element) and video steps (a wrapper <div>
 * IS this element, with the <video> and its play button as children - see
 * .oms-tour__video-wrap below). object-fit only applies to replaced
 * elements, so it's on the img/video rule further down instead of here.
 */
.oms-tour__media-item {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease;
	margin: 0;
}

.oms-tour__media-item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

img.oms-tour__media-item,
.oms-tour__video {
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.oms-tour__media-item {
		transition: none;
	}
}

/*
 * Client request: video steps must never autoplay - only a poster/first
 * frame shows until the visitor clicks the play button (see
 * oms-product-tour.js: setMediaActive() no longer calls video.play() on
 * activation, only on this button's click). overflow:hidden clips the
 * <video>'s square corners to whatever border-radius the Media Panel style
 * control sets on this wrapper (that control targets .oms-tour__media-item,
 * which this wrapper carries) - the <video> itself doesn't get its own
 * radius set.
 */
.oms-tour__video-wrap {
	overflow: hidden;
}

/*
 * YouTube/Vimeo steps ("lite embed" pattern): the wrapper itself shows the
 * poster/thumbnail as a background-image and nothing else - no iframe
 * exists in the DOM until the play button is clicked (see
 * oms-product-tour.js), so the platform's player script/cookies never load
 * for a step the visitor doesn't choose to play.
 */
.oms-tour__embed-wrap {
	background-color: #0e0e12;
	background-size: cover;
	background-position: center;
}

.oms-tour__embed-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.oms-tour__video {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.oms-tour__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: none;
	border-radius: 50%;
	appearance: none;
	cursor: pointer;
	background-color: rgba(17, 17, 20, 0.55);
	color: #ffffff;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.oms-tour__video-play:hover,
.oms-tour__video-play:focus-visible {
	background-color: rgba(128, 23, 225, 0.85);
	transform: translate(-50%, -50%) scale(1.08);
}

.oms-tour__video-play svg {
	width: 26px;
	height: 26px;
	/* Optically center the triangle: its own bounding box has more empty
	   space on the left (the point) than the right (the flat edge), so a
	   dead-center position reads as slightly left-heavy. */
	margin-left: 3px;
}

.oms-tour__video-wrap.is-playing .oms-tour__video-play {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.oms-tour__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ */
/* Responsive                                                    */
/* ------------------------------------------------------------ */

/*
 * .oms-tour has align-items:start, so the two grid columns size
 * independently: the media panel's height comes from its own
 * aspect-ratio (shrinks as the widget narrows), while the steps panel's
 * height comes from fixed-size text/padding that doesn't shrink with
 * width. Above ~1446px the media panel is comfortably taller; below it,
 * the media panel keeps getting shorter while the steps panel doesn't,
 * until the steps panel (specifically the last step + the CTA button)
 * visibly overhangs past the media panel's bottom edge. This tier
 * shrinks the steps panel's own font-sizes/padding so its accumulated
 * height comes back down near the media panel's, without touching the
 * desktop look above 1446px. Confirmed via direct
 * getBoundingClientRect() measurement: at 1357px actual viewport width
 * (a 1446px OS window) the steps panel ran ~168px taller than the media
 * panel before this fix.
 */
@media (max-width: 1446px) {
	.oms-tour__panel--steps {
		padding: 8px 0 4px;
	}

	.oms-tour__steps .oms-tour__step {
		padding-left: 18px;
		padding-right: 18px;
	}

	.oms-tour__step-trigger {
		grid-template-columns: 26px 1fr;
		column-gap: 12px;
		padding: 4px 0;
	}

	.oms-tour__step-number {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}

	.oms-tour__step-title {
		font-size: 13px;
		line-height: 1.25;
	}

	.oms-tour__step-body {
		font-size: 11px;
		line-height: 1.3;
	}

	.oms-tour__cta {
		margin: 8px auto 0;
		padding: 8px 22px;
	}
}

/*
 * Moved up from 767px: below this width, stop trying to keep the two
 * columns height-matched at all and just stack them - media on top
 * (full width), steps below (full width). That sidesteps the
 * height-mismatch problem entirely rather than continuing to shrink text
 * to chase it.
 */
@media (max-width: 1200px) {
	.oms-tour {
		grid-template-columns: 1fr;
	}

	.oms-tour__panel--media {
		order: -1;
	}

	.oms-tour__step.is-active::after,
	.oms-tour__step.is-active::before {
		display: none;
	}
}