/**
 * Tour single product — JS tab mode (default for all devices).
 *
 * @package GEEO
 */

body.geeo-product-tabs-mode.single-product #section2,
body.geeo-product-tabs-mode.single-product #section3,
body.geeo-product-tabs-mode.single-product #section4,
body.geeo-product-tabs-mode.single-product #section5 {
	display: none;
}

/* Keyboard only — avoid a "box" outline on tap that reads like L/R borders on mobile. */
body.geeo-product-tabs-mode .overview-nav a.geeo-tour-tab-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * custom.css hides .overview-nav at max-width:991px (scroll-only UX on small screens).
 * Tab mode needs the bar visible so users can switch sections.
 */
@media only screen and (max-width: 991px) {
	body.geeo-product-tabs-mode .geeo-tour-section-nav,
	body.geeo-product-tabs-mode .geeo-tour-section-nav .overview-nav {
		border-radius: 0;
		box-shadow: none;
	}

	body.geeo-product-tabs-mode .geeo-tour-section-nav .overview-nav {
		display: block !important;
	}

	/* Horizontally scrollable tab strip — full text, no wrapping. */
	body.geeo-product-tabs-mode .geeo-tour-section-nav .container {
		position: relative;
		max-width: none;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-top: 0;
		padding-bottom: 0;
	}

	body.geeo-product-tabs-mode .geeo-tour-section-nav .container::-webkit-scrollbar {
		display: none;
		height: 0;
		width: 0;
	}

	/* Right-edge fade to hint the row scrolls. */
	body.geeo-product-tabs-mode .geeo-tour-section-nav::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 32px;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(235, 235, 235, 0) 0%, #ebebeb 100%);
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul {
		display: flex;
		flex-wrap: nowrap !important;
		white-space: nowrap;
		margin-bottom: 0;
		padding: 8px 0 10px;
		gap: 6px;
		align-items: stretch;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li {
		float: none;
		flex: 0 0 auto;
		margin-right: 0 !important;
		white-space: nowrap;
	}

	/*
	 * Segment-style tabs (square): full text on one line, horizontal scroll for overflow.
	 */
	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo {
		border: none !important;
		border-bottom: none !important;
		border-radius: 0;
		padding: 10px 14px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		white-space: nowrap !important;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		color: #6b6b6b;
		background: rgba(255, 255, 255, 0.45);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
		transition:
			background 0.2s ease,
			color 0.2s ease,
			box-shadow 0.2s ease,
			transform 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo.active {
		color: #0d3d5c !important;
		font-weight: 700 !important;
		background: #fff !important;
		box-shadow:
			0 0 0 1px rgba(62, 129, 184, 0.35),
			0 4px 12px rgba(62, 129, 184, 0.18) !important;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo .geeo-tour-tab-icon {
		flex-shrink: 0;
		margin-right: 0;
		opacity: 0.92;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo .geeo-tour-tab-icon .fa {
		font-size: 14px;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo .geeo-tour-tab-label {
		flex-shrink: 0;
		white-space: nowrap;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo.active .geeo-tour-tab-icon {
		opacity: 1;
		color: #5aba47;
	}

	body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo:active {
		transform: scale(0.98);
	}

	@media (prefers-reduced-motion: reduce) {
		body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo,
		body.geeo-product-tabs-mode.single-product .geeo-tour-section-nav .overview-nav ul li a.geeo-tour-tab-link.scrollTo:active {
			transition: none;
			transform: none;
		}
	}
}