.rekhi-nav {
	--rekhi-nav-primary: var(--primary-color, var(--rekhi-primary-color, #FF6600));
	--rekhi-nav-surface: var(--bg-dark-surface, #101010);
	--rekhi-nav-text: var(--text-light-main, #f7f4ef);
	position: relative;
	z-index: 999;
}

.rekhi-nav-panel,
.rekhi-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rekhi-nav-list li {
	position: relative;
	margin: 0;
}

.rekhi-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 11px;
	color: var(--rekhi-nav-text);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	text-decoration: none;
}

.rekhi-nav a:hover,
.rekhi-nav li:focus-within > a {
	color: var(--rekhi-nav-surface);
	background: var(--rekhi-nav-primary);
}

.rekhi-nav-sub {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	display: grid;
	min-width: 270px;
	max-height: min(72vh, 760px);
	margin: 0;
	padding: 10px;
	list-style: none;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
	background: rgba(18,18,18,.94);
	box-shadow: 0 26px 80px rgba(0,0,0,.36);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
}

.rekhi-nav-depth-2 {
	top: -10px;
	left: calc(100% + 10px);
	max-height: min(68vh, 660px);
}

.rekhi-nav-depth-2.is-flip-left,
.rekhi-nav li.is-flip-left > .rekhi-nav-depth-2 {
	left: auto;
	right: calc(100% + 10px);
}

.rekhi-nav li:hover > .rekhi-nav-sub,
.rekhi-nav li:focus-within > .rekhi-nav-sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rekhi-nav-sub a {
	justify-content: space-between;
	width: 100%;
	border-radius: 10px;
	white-space: nowrap;
}

.rekhi-nav-accordion,
.rekhi-nav-toggle {
	display: none;
}

.rekhi-nav-cta {
	margin-left: 8px;
	color: var(--rekhi-nav-surface) !important;
	background: var(--rekhi-nav-primary);
	box-shadow: 0 14px 34px color-mix(in srgb, var(--rekhi-nav-primary) 30%, transparent);
	animation: rekhiNavPulse 2.8s ease-in-out infinite;
}

@keyframes rekhiNavPulse {
	50% {
		transform: scale(1.025);
		box-shadow: 0 18px 48px color-mix(in srgb, var(--rekhi-nav-primary) 42%, transparent);
	}
}

@media (max-width: 991px) {
	.rekhi-nav-toggle {
		display: inline-grid;
		gap: 4px;
		width: 44px;
		height: 44px;
		place-content: center;
		border: 1px solid rgba(255,255,255,.14);
		border-radius: 999px;
		background: rgba(255,255,255,.08);
	}

	.rekhi-nav-toggle span {
		display: block;
		width: 20px;
		height: 2px;
		background: var(--rekhi-nav-text);
		transition: transform .2s ease, opacity .2s ease;
	}

	.rekhi-nav.is-open .rekhi-nav-toggle span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.rekhi-nav.is-open .rekhi-nav-toggle span:nth-child(2) {
		opacity: 0;
	}
	.rekhi-nav.is-open .rekhi-nav-toggle span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.rekhi-nav-panel {
		position: fixed;
		inset: 70px 0 auto 0;
		display: none;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 16px;
		background: rgba(18,18,18,.96);
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	.rekhi-nav.is-open .rekhi-nav-panel,
	.rekhi-nav-list {
		display: grid;
		align-items: stretch;
		width: 100%;
	}

	.rekhi-nav-list {
		gap: 4px;
	}

	.rekhi-nav-list li {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	.rekhi-nav a {
		min-height: 48px;
		border-radius: 10px;
	}

	.rekhi-nav-accordion {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		border: 0;
		background: transparent;
	}

	.rekhi-nav-accordion::before {
		content: "+";
		color: var(--rekhi-nav-primary);
		font-weight: 900;
	}

	.rekhi-nav li.is-expanded > .rekhi-nav-accordion::before {
		content: "-";
	}

	.rekhi-nav-sub,
	.rekhi-nav-depth-2,
	.rekhi-nav-depth-2.is-flip-left {
		position: static;
		display: none;
		grid-column: 1 / -1;
		min-width: 0;
		margin: 0 0 4px 10px;
		padding: 4px;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.rekhi-nav li.is-expanded > .rekhi-nav-sub {
		display: grid;
	}

	.rekhi-nav li:hover > .rekhi-nav-sub {
		transform: none;
	}

	.rekhi-nav-cta {
		width: 100%;
		justify-content: center;
		margin: 12px 0 0;
	}
}