/**
 * Legacy-inspired mobile off-canvas navigation.
 * Scoped to the custom Jooker header and EduBlink's 1200px breakpoint.
 */

.jooker-mobile-menu {
	display: none;
}

@media (max-width: 1199px) {
	.jooker-mobile-menu {
		position: fixed;
		z-index: 10000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		visibility: hidden;
		pointer-events: none;
	}

	body.admin-bar .jooker-mobile-menu {
		top: 32px;
	}

	.jooker-mobile-menu__overlay {
		position: absolute;
		inset: 0;
		background: rgba(2, 8, 7, 0.58);
		opacity: 0;
		transition: opacity 220ms ease;
	}

	.jooker-mobile-menu__panel {
		position: absolute;
		top: 0;
		bottom: 0;
		width: min(70vw, 560px);
		min-width: 224px;
		max-width: 72vw;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: #1c1e27;
		box-shadow: 0 0 24px rgba(0, 0, 0, 0.28);
		color: #fff;
		opacity: 0;
		transition: transform 240ms ease, opacity 180ms ease;
		will-change: transform;
	}

	html[dir="rtl"] .jooker-mobile-menu__panel {
		right: 0;
		left: auto;
		direction: rtl;
		text-align: right;
		transform: translate3d(100%, 0, 0);
	}

	html[dir="ltr"] .jooker-mobile-menu__panel {
		right: auto;
		left: 0;
		direction: ltr;
		text-align: left;
		transform: translate3d(-100%, 0, 0);
	}

	body.jooker-mobile-menu-open {
		overflow: hidden;
	}

	body.jooker-mobile-menu-open .jooker-mobile-menu {
		visibility: visible;
		pointer-events: auto;
	}

	body.jooker-mobile-menu-open .jooker-mobile-menu__overlay {
		opacity: 1;
	}

	body.jooker-mobile-menu-open .jooker-mobile-menu__panel {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.jooker-mobile-menu__close {
		position: absolute;
		top: 15px;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		font-size: 27px;
		line-height: 1;
		cursor: pointer;
	}

	html[dir="rtl"] .jooker-mobile-menu__close {
		left: 8px;
	}

	html[dir="ltr"] .jooker-mobile-menu__close {
		right: 8px;
	}

	.jooker-mobile-menu__close:hover,
	.jooker-mobile-menu__close:focus-visible {
		color: #6b9080;
	}

	.jooker-mobile-menu__logo {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 80px;
		padding: 15px 44px 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	}

	.jooker-mobile-menu__logo a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.jooker-mobile-menu__logo img {
		display: block;
		width: auto;
		max-width: 120px;
		max-height: 50px;
		object-fit: contain;
	}

	.jooker-mobile-menu__nav,
	.jooker-mobile-menu__nav ul,
	.jooker-mobile-menu__contact,
	.jooker-mobile-menu__social {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.jooker-mobile-menu__nav {
		padding: 0 11px;
	}

	.jooker-mobile-menu__nav > .menu-item {
		position: relative;
		margin: 0;
	}

	.jooker-mobile-menu__nav a,
	.jooker-mobile-menu__link {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 45px;
		padding: 9px 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
		background: transparent;
		color: rgba(255, 255, 255, 0.94);
		font-family: "Tajawal", sans-serif;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.6;
		text-decoration: none;
		transition: color 160ms ease, background-color 160ms ease;
	}

	.jooker-mobile-menu__nav a:hover,
	.jooker-mobile-menu__nav a:focus-visible,
	.jooker-mobile-menu__link:hover,
	.jooker-mobile-menu__link:focus-visible,
	.jooker-mobile-menu__nav .current-menu-item > a,
	.jooker-mobile-menu__nav .current-menu-ancestor > a {
		background: rgba(107, 144, 128, 0.08);
		color: #6b9080;
	}

	.jooker-mobile-menu__submenu-toggle {
		position: absolute;
		top: 4px;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 37px;
		height: 37px;
		padding: 0;
		border: 0;
		background: transparent;
		color: rgba(255, 255, 255, 0.8);
		font-size: 20px;
		cursor: pointer;
	}

	html[dir="rtl"] .jooker-mobile-menu__submenu-toggle {
		left: 4px;
	}

	html[dir="ltr"] .jooker-mobile-menu__submenu-toggle {
		right: 4px;
	}

	.jooker-mobile-menu__submenu-toggle i {
		transition: transform 160ms ease;
	}

	.jooker-mobile-menu__submenu-toggle[aria-expanded="true"] i {
		transform: rotate(180deg);
	}

	.jooker-mobile-menu__nav .sub-menu {
		display: none;
		padding-inline-start: 14px;
		background: rgba(0, 0, 0, 0.12);
	}

	.jooker-mobile-menu__nav .sub-menu.is-open {
		display: block;
	}

	.jooker-mobile-menu__nav .sub-menu a {
		min-height: 40px;
		font-size: 13px;
	}

	.jooker-mobile-menu__language,
	.jooker-mobile-menu__cart,
	.jooker-mobile-menu__auth,
	.jooker-mobile-menu__account-links {
		padding: 0 11px;
	}

	.jooker-mobile-menu__language-flag,
	.jooker-mobile-menu__avatar {
		width: 30px;
		height: 30px;
		flex: 0 0 30px;
		border-radius: 50%;
		object-fit: cover;
	}

	.jooker-mobile-menu__cart .jkr-cart-badge {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		margin-inline-start: auto;
		padding: 0 5px;
		border-radius: 9px;
		background: #e53e4f;
		color: #fff;
		font-size: 11px;
		line-height: 18px;
	}

	.jooker-mobile-menu__user {
		padding-top: 7px;
	}

	.jooker-mobile-menu__user-row {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 9px 21px;
		color: rgba(255, 255, 255, 0.82);
		font-size: 13px;
	}

	.jooker-mobile-menu__account-links .jkr-account-link-disabled {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 45px;
		padding: 9px 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
		color: rgba(255, 255, 255, 0.45);
	}

	.jooker-mobile-menu__contact {
		display: grid;
		gap: 8px;
		padding: 15px 21px 7px;
		border-top: 1px solid rgba(255, 255, 255, 0.09);
	}

	.jooker-mobile-menu__contact li {
		display: flex;
		align-items: center;
		gap: 11px;
		min-width: 0;
	}

	.jooker-mobile-menu__contact i {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		border-radius: 50%;
		background: #6b9080;
		color: #fff;
		font-size: 15px;
	}

	.jooker-mobile-menu__contact a {
		min-width: 0;
		overflow-wrap: anywhere;
		color: rgba(255, 255, 255, 0.88);
		font-size: 12px;
		text-decoration: none;
	}

	.jooker-mobile-menu__social {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 12px 18px 20px;
	}

	.jooker-mobile-menu__social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		color: #6b9080;
		font-size: 16px;
		text-decoration: none;
		transition: background-color 160ms ease, color 160ms ease;
	}

	.jooker-mobile-menu__social a:hover,
	.jooker-mobile-menu__social a:focus-visible {
		background: rgba(107, 144, 128, 0.14);
		color: #fff;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .jooker-mobile-menu {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jooker-mobile-menu__overlay,
	.jooker-mobile-menu__panel,
	.jooker-mobile-menu__submenu-toggle i {
		transition-duration: 1ms;
	}
}