/**
 * HLxHub — Mobile Review Sticky TOC
 *
 * File:
 * assets/css/single-mobile/mobile-toc.css
 *
 * Design:
 * Premium Header-Style Navigation
 *
 * Features:
 * - Sticky on scroll
 * - Single horizontal line
 * - Mobile horizontal swipe
 * - Glass / premium effect
 * - Active navigation state
 * - No page-level horizontal overflow
 */


/* ================================================================
   ROOT
================================================================ */
.hlx-mobile-toc {
	position: -webkit-sticky;
	position: sticky;

	top: 0;

	z-index: 9999;

	width: 100%;

	margin: 0;

	padding: 10px 0;

	box-sizing: border-box;

	background: rgba(255, 255, 255, 0.94);

	border-top: 1px solid rgba(16, 24, 40, 0.05);

	border-bottom: 1px solid rgba(16, 24, 40, 0.08);

	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);

	box-shadow:
		0 8px 25px rgba(16, 24, 40, 0.08);
}
/* ================================================================
   BOX SIZING
================================================================ */

.hlx-mobile-toc *,
.hlx-mobile-toc *::before,
.hlx-mobile-toc *::after {
	box-sizing: border-box;
}


/* ================================================================
   INNER
================================================================ */

.hlx-mobile-toc__inner {
	width: min(1240px, calc(100% - 36px));

	margin: 0 auto;
}


/* ================================================================
   MAIN BAR
================================================================ */

.hlx-mobile-toc__bar {
	display: flex;

	align-items: center;

	width: 100%;

	min-width: 0;

	height: 46px;

	padding: 0 6px;

	border: 1px solid rgba(16, 24, 40, 0.075);

	border-radius: 14px;

	background:
		rgba(255, 255, 255, 0.9);

	box-shadow:
		0 5px 18px rgba(16, 24, 40, 0.035);
}


/* ================================================================
   LEFT LABEL
================================================================ */

.hlx-mobile-toc__label {
	display: flex;

	align-items: center;

	gap: 8px;

	flex: 0 0 auto;

	height: 32px;

	padding: 0 12px;

	margin-right: 4px;

	border-radius: 9px;

	background: #101828;

	color: #ffffff;

	white-space: nowrap;
}


/* ================================================================
   LABEL ICON
================================================================ */

.hlx-mobile-toc__label-icon {
	display: grid;

	place-items: center;

	width: 17px;

	height: 17px;

	flex: 0 0 17px;

	color: #ffffff;
}


.hlx-mobile-toc__label-icon svg {
	display: block;

	width: 15px;

	height: 15px;
}


/* ================================================================
   LABEL TEXT
================================================================ */

.hlx-mobile-toc__label-text {
	font-family: inherit;

	font-size: 9px;

	font-weight: 800;

	line-height: 1;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


/* ================================================================
   NAV
================================================================ */

.hlx-mobile-toc__nav {
	position: relative;

	flex: 1 1 auto;

	min-width: 0;

	height: 100%;
}


/* ================================================================
   HORIZONTAL SCROLL AREA
================================================================ */

.hlx-mobile-toc__scroll {
	display: flex;

	align-items: center;

	width: 100%;

	height: 100%;

	gap: 3px;

	overflow-x: auto;

	overflow-y: hidden;

	padding: 0 4px;

	scroll-behavior: smooth;

	scrollbar-width: none;

	-ms-overflow-style: none;

	overscroll-behavior-x: contain;
}


.hlx-mobile-toc__scroll::-webkit-scrollbar {
	display: none;
}


/* ================================================================
   NAV LINK
================================================================ */

.hlx-mobile-toc__link {
	position: relative;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 6px;

	flex: 0 0 auto;

	height: 32px;

	padding: 0 11px;

	border-radius: 8px;

	border: 1px solid transparent;

	font-family: inherit;

	font-size: 10px;

	font-weight: 700;

	line-height: 1;

	text-decoration: none;

	white-space: nowrap;

	color: #667085;

	background: transparent;

	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}


/* ================================================================
   HOVER
================================================================ */

.hlx-mobile-toc__link:hover {
	color: #1769ff;

	background: rgba(23, 105, 255, 0.055);

	border-color: rgba(23, 105, 255, 0.08);

	transform: translateY(-1px);
}


/* ================================================================
   ACTIVE
================================================================ */

.hlx-mobile-toc__link.is-active {
	color: #1769ff;

	background: rgba(23, 105, 255, 0.085);

	border-color: rgba(23, 105, 255, 0.12);

	box-shadow:
		0 3px 10px rgba(23, 105, 255, 0.06);
}


/* ================================================================
   DOT
================================================================ */

.hlx-mobile-toc__dot {
	display: block;

	width: 5px;

	height: 5px;

	flex: 0 0 5px;

	border-radius: 50%;

	background: #98a2b3;

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}


/* ACTIVE DOT */

.hlx-mobile-toc__link.is-active .hlx-mobile-toc__dot {
	background: #1769ff;

	transform: scale(1.15);

	box-shadow:
		0 0 0 3px rgba(23, 105, 255, 0.10);
}


/* ================================================================
   TEXT
================================================================ */

.hlx-mobile-toc__text {
	display: block;

	overflow: hidden;

	text-overflow: ellipsis;

	max-width: 150px;
}


/* ================================================================
   RIGHT EDGE
================================================================ */

.hlx-mobile-toc__edge {
	display: grid;

	place-items: center;

	flex: 0 0 auto;

	width: 29px;

	height: 32px;

	margin-left: 3px;

	border-left: 1px solid rgba(16, 24, 40, 0.07);

	color: #98a2b3;

	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.96) 35%
		);

	pointer-events: none;
}


.hlx-mobile-toc__edge svg {
	display: block;

	width: 13px;

	height: 13px;
}


/* ================================================================
   STICKY SHADOW
================================================================ */

@supports (animation-timeline: scroll()) {

	.hlx-mobile-toc {
		animation: hlx-toc-shadow linear both;

		animation-timeline: scroll(root);

		animation-range: 0 120px;
	}

}


@keyframes hlx-toc-shadow {

	from {
		box-shadow:
			0 3px 10px rgba(16, 24, 40, 0.025);
	}

	to {
		box-shadow:
			0 10px 30px rgba(16, 24, 40, 0.09);
	}

}


/* ================================================================
   TABLET
================================================================ */

@media (max-width: 850px) {

	.hlx-mobile-toc__inner {
		width: min(100%, calc(100% - 24px));
	}


	.hlx-mobile-toc {
		padding: 8px 0;
	}


	.hlx-mobile-toc__bar {
		height: 44px;

		border-radius: 12px;
	}


	.hlx-mobile-toc__label {
		height: 30px;

		padding: 0 10px;

		gap: 6px;
	}


	.hlx-mobile-toc__label-text {
		font-size: 8px;
	}


	.hlx-mobile-toc__link {
		height: 30px;

		padding: 0 9px;

		font-size: 9.5px;
	}

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 650px) {

	.hlx-mobile-toc {
		padding: 7px 0;
	}


	.hlx-mobile-toc__inner {
		width: 100%;
	}


	.hlx-mobile-toc__bar {
		height: 43px;

		padding: 0 4px;

		border-radius: 0;

		border-left: 0;

		border-right: 0;
	}


	/* --------------------------------
	   LABEL
	-------------------------------- */

	.hlx-mobile-toc__label {
		height: 29px;

		padding: 0 9px;

		margin-right: 2px;

		border-radius: 8px;
	}


	.hlx-mobile-toc__label-icon {
		width: 15px;

		height: 15px;

		flex-basis: 15px;
	}


	.hlx-mobile-toc__label-icon svg {
		width: 13px;

		height: 13px;
	}


	.hlx-mobile-toc__label-text {
		font-size: 7.5px;
	}


	/* --------------------------------
	   NAV
	-------------------------------- */

	.hlx-mobile-toc__scroll {
		gap: 2px;

		padding: 0 3px;

		scroll-padding-left: 3px;
	}


	/* --------------------------------
	   LINKS
	-------------------------------- */

	.hlx-mobile-toc__link {
		height: 29px;

		padding: 0 9px;

		border-radius: 7px;

		font-size: 9px;

		gap: 5px;
	}


	.hlx-mobile-toc__dot {
		width: 4px;

		height: 4px;

		flex-basis: 4px;
	}


	.hlx-mobile-toc__text {
		max-width: 125px;
	}


	/* --------------------------------
	   EDGE
	-------------------------------- */

	.hlx-mobile-toc__edge {
		width: 24px;

		height: 29px;

		margin-left: 1px;
	}

}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 390px) {

	.hlx-mobile-toc {
		padding: 6px 0;
	}


	.hlx-mobile-toc__bar {
		height: 41px;
	}


	.hlx-mobile-toc__label {
		height: 27px;

		padding: 0 7px;
	}


	.hlx-mobile-toc__label-text {
		font-size: 7px;
	}


	.hlx-mobile-toc__link {
		height: 27px;

		padding: 0 8px;

		font-size: 8.5px;
	}


	.hlx-mobile-toc__text {
		max-width: 110px;
	}


	.hlx-mobile-toc__edge {
		height: 27px;

		width: 21px;
	}

}


/* ================================================================
   ACCESSIBILITY
================================================================ */

.hlx-mobile-toc__link:focus-visible {
	outline: 2px solid #1769ff;

	outline-offset: 2px;
}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

	.hlx-mobile-toc__scroll {
		scroll-behavior: auto;
	}


	.hlx-mobile-toc__link {
		transition: none;
	}

}

 /* ================================================================
    HLXHub — FORCE STICKY TOC TEST
 ================================================================= */

.hlx-mobile-toc {
    position: sticky !important;
    position: -webkit-sticky !important;

    top: 0 !important;

    z-index: 999999 !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
}

/* ================================================================
   HLxHub — Sticky TOC Position Fix
   Desktop / Laptop
================================================================ */

.hlx-single-mobile-page__toc,
.hlx-mobile-toc {
    position: sticky;
    top: 78px; /* Header ki actual height ke hisaab se */
    z-index: 50;

    /* Header se chipkega nahi */
    margin-top: 0;

    /* Content ke upar rahe */
    isolation: isolate;
}


/* ================================================================
   LAPTOP
================================================================ */

@media (min-width: 901px) {

    .hlx-single-mobile-page__toc,
    .hlx-mobile-toc {
        top: 82px;
    }
}


/* ================================================================
   TABLET
================================================================ */

@media (max-width: 900px) and (min-width: 701px) {

    .hlx-single-mobile-page__toc,
    .hlx-mobile-toc {
        top: 70px;
    }
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 700px) {

    .hlx-single-mobile-page__toc,
    .hlx-mobile-toc {
        top: 60px;
    }
}