/**
 * JA Mega Menu Pro - frontend styles
 * -----------------------------------
 * All design tokens live on .ja-mm-shell so that Elementor controls
 * (which target .ja-mm) can override them without fighting inline styles.
 */

.ja-mm-shell {
	--ja-p: #a100ff;
	--ja-p-soft: #f4e3ff;
	--ja-bg: #ffffff;
	--ja-text: #333333;
	--ja-muted: #999999;
	--ja-border: #eeeeee;
	--ja-banner-bg: #fafafa;
	--ja-nav-w: 160px;
	--ja-banner-w: 170px;
	--ja-logo-h: 72px;
	--ja-logo-w: 100%;
	--ja-h: 440px;
	--ja-radius: 14px;
	--ja-gap-x: 30px;
	--ja-gap-y: 26px;
	--ja-cols: 3;
	--ja-rows: 2;
	/* Typography: one base size drives every text node in the menu. */
	--ja-font: inherit;
	--ja-fs: 14px;
	--ja-fs-lg: calc(var(--ja-fs) * 1.2857); /* 18px at the 14px base */
	--ja-fs-md: calc(var(--ja-fs) * 0.9286); /* 13px */
	--ja-fs-sm: calc(var(--ja-fs) * 0.8571); /* 12px */
	--ja-fs-xs: calc(var(--ja-fs) * 0.7857); /* 11px */
	/* Sub-category styles (customisable in the admin). */
	--ja-l2-color: var(--ja-text);
	--ja-l2-weight: 700;
	--ja-l2-indent: 10px;
	--ja-l2-bar-w: 3px;
	--ja-l2-bar-s: solid;
	--ja-l2-bar-c: var(--ja-p);
	--ja-l3-color: var(--ja-text);
	--ja-l3-weight: 600;
	--ja-l3-indent: 10px;
	--ja-l3-bar-w: 2px;
	--ja-l3-bar-s: dotted;
	--ja-l3-bar-c: var(--ja-p);
	position: relative;
	width: 100%;
	max-width: 100%;
	direction: inherit;
	font-family: var(--ja-font, inherit);
	font-size: var(--ja-fs);
}

.ja-mm-shell *,
.ja-mm-shell *::before,
.ja-mm-shell *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Shell */
.ja-mm {
	position: relative;
	display: grid;
	grid-template-columns: var(--ja-nav-w) minmax(0, 1fr) var(--ja-banner-w);
	grid-template-rows: var(--ja-logo-h) minmax(0, 1fr);
	grid-template-areas: "logo logo logo" "nav main banner";
	width: 100%;
	height: var(--ja-h);
	background: var(--ja-bg);
	border: 1px solid var(--ja-border);
	border-radius: var(--ja-radius);
	box-shadow: 0 15px 50px rgba(15, 23, 42, .10);
	overflow: hidden;
	color: var(--ja-text);
	font-family: var(--ja-font, inherit);
	line-height: 1.6;
	text-align: start;
	-webkit-tap-highlight-color: transparent;
}

.ja-mm.ja-mm--banner-start {
	grid-template-columns: var(--ja-banner-w) var(--ja-nav-w) minmax(0, 1fr);
	grid-template-areas: "logo logo logo" "banner nav main";
}

.ja-mm.ja-mm--no-banner {
	grid-template-columns: var(--ja-nav-w) minmax(0, 1fr);
	grid-template-areas: "logo logo" "nav main";
}

.ja-mm.ja-mm--no-banner.ja-mm--banner-start {
	grid-template-columns: var(--ja-nav-w) minmax(0, 1fr);
	grid-template-areas: "logo logo" "nav main";
}

.ja-mm.ja-mm--nologo {
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "nav main banner";
}

.ja-mm.ja-mm--nologo.ja-mm--banner-start {
	grid-template-areas: "banner nav main";
}

.ja-mm.ja-mm--no-banner.ja-mm--nologo {
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "nav main";
}

.ja-mm.ja-mm--no-banner.ja-mm--nologo.ja-mm--banner-start {
	grid-template-areas: "nav main";
}

.ja-mm.ja-mm--nologo.ja-mm--no-banner {
	grid-template-areas: "nav main";
}

/* ------------------------------------------------- Panel-only (nav menus)
   `panel` render mode: the theme's own <li> is the trigger, so the shell only
   carries the panel and its banner. Placed after the logo/banner variants so
   it wins at equal specificity. */
.ja-mm.ja-mm--panel-only {
	grid-template-columns: minmax(0, 1fr) var(--ja-banner-w);
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "main banner";
	height: auto;
	max-height: min(78vh, 760px);
}

.ja-mm.ja-mm--panel-only.ja-mm--banner-start {
	grid-template-columns: var(--ja-banner-w) minmax(0, 1fr);
	grid-template-areas: "banner main";
}

.ja-mm.ja-mm--panel-only.ja-mm--no-banner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main";
}

/* ---------------------------------------------------------------- Logo */
.ja-mm-logo {
	grid-area: logo;
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 10px 18px;
	border-bottom: 1px solid var(--ja-border);
}

.ja-mm-logo a {
	display: inline-flex;
	align-items: center;
	max-height: 100%;
	text-decoration: none;
}

.ja-mm-logo img {
	display: block;
	width: auto;
	/* The plain value stays as a fallback: if the token is ever resolved to
	   nothing, the `min()` declaration is dropped and this one still applies. */
	max-width: 100%;
	max-width: min(100%, var(--ja-logo-w, 100%));
	max-height: calc(var(--ja-logo-h) - 20px);
	object-fit: contain;
}

/* ---------------------------------------------------------------- Nav */
.ja-mm-nav {
	grid-area: nav;
	min-width: 0;
	padding: 6px;
	overflow-x: hidden;
	overflow-y: auto;
	border-inline-end: 1px solid var(--ja-border);
	scrollbar-width: thin;
}

.ja-mm-nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 46px;
	margin-bottom: 4px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--ja-text);
	font-size: var(--ja-fs);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.ja-mm-nav-link:hover,
.ja-mm-nav-link.is-active {
	background: var(--ja-p-soft);
	color: var(--ja-p);
}

.ja-mm-nav-link.is-active::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 3px;
	background: var(--ja-p);
}

.ja-mm-nav-link:focus-visible {
	outline: 2px solid var(--ja-p);
	outline-offset: -2px;
}

.ja-mm-nav-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.ja-mm-nav-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- Main */
.ja-mm-main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px 26px;
	overflow: hidden;
}

.ja-mm-panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: auto;
	scrollbar-width: thin;
}

.ja-mm-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ja-border);
}

.ja-mm-top-title {
	margin: 0;
	color: var(--ja-text);
	font-size: var(--ja-fs-lg);
	font-weight: 800;
	line-height: 1.4;
}

.ja-mm-top-view-all {
	flex: 0 0 auto;
	color: var(--ja-muted);
	font-size: var(--ja-fs-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.ja-mm-top-view-all:hover {
	color: var(--ja-p);
}

/* ---------------------------------------------------------------- Groups */
/* Each row is its own wrapper. An implicit grid row can start next to the
   tallest column of the row above (the short column leaves a gap and the next
   row slides up); wrapping the row in a block-level element guarantees that a
   row always begins below *everything* in the previous one. */
.ja-mm-groups {
	display: flex;
	flex-direction: column;
	gap: var(--ja-gap-y);
	align-items: stretch;
}

.ja-mm-row {
	display: grid;
	grid-template-columns: repeat(var(--ja-cols, 3), minmax(0, 1fr));
	gap: var(--ja-gap-x);
	align-items: start;
}

.ja-mm-group {
	min-width: 0;
}

.ja-mm-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ja-mm-item-wrap {
	min-width: 0;
}

.ja-mm-item {
	display: block;
	color: var(--ja-muted);
	font-size: var(--ja-fs-md);
	line-height: 1.9;
	text-decoration: none;
	transition: color .18s ease;
}

.ja-mm-item:hover {
	color: var(--ja-p);
}

/* Level 2 highlight: every child category gets an accent bar. */
.ja-mm--hl2 .ja-mm-item {
	position: relative;
	padding-inline-start: var(--ja-l2-indent);
	color: var(--ja-l2-color);
	font-weight: var(--ja-l2-weight);
}

.ja-mm--hl2 .ja-mm-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 6px;
	bottom: 6px;
	width: 0;
	border-inline-start: var(--ja-l2-bar-w) var(--ja-l2-bar-s) var(--ja-l2-bar-c);
	border-radius: 3px;
}

/* The level colour is more specific than the base item colour, so the hover
   state needs an explicit override to stay visible. */
.ja-mm--hl2 .ja-mm-item:hover {
	color: var(--ja-p);
}

.ja-mm-grandchildren {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 2px;
	padding-inline-start: 12px;
}

.ja-mm-grand {
	color: var(--ja-muted);
	font-size: var(--ja-fs-sm);
	text-decoration: none;
	transition: color .18s ease;
}

.ja-mm-grand:hover {
	color: var(--ja-p);
}

.ja-mm-grand--parent {
	position: relative;
	margin-top: 3px;
	padding-inline-start: 8px;
	color: var(--ja-text);
	font-weight: 600;
}

/* A quiet marker for "this item has level 4 children"; the accent dotted bar
   is reserved for the opt-in `is-styled` level 3 state. */
.ja-mm-grand--parent::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 4px;
	bottom: 4px;
	border-inline-start: 2px solid var(--ja-border);
}

/* Level 3 highlight: opt-in per item, dotted by default. */
.ja-mm--hl3 .ja-mm-grand.is-styled {
	position: relative;
	padding-inline-start: var(--ja-l3-indent);
	color: var(--ja-l3-color);
	font-weight: var(--ja-l3-weight);
}

.ja-mm--hl3 .ja-mm-grand.is-styled::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 3px;
	bottom: 3px;
	width: 0;
	border-inline-start: var(--ja-l3-bar-w) var(--ja-l3-bar-s) var(--ja-l3-bar-c);
}

.ja-mm-l4-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-inline-start: 12px;
}

.ja-mm-l4-list a {
	color: var(--ja-muted);
	font-size: var(--ja-fs-xs);
	text-decoration: none;
	transition: color .18s ease;
}

.ja-mm-l4-list a:hover {
	color: var(--ja-p);
}

/* ---------------------------------------------------------------- Banner */
.ja-mm-banner {
	grid-area: banner;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	padding-inline-start: 8px;
}

.ja-mm-banner img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.ja-mm-banner:hover img {
	transform: scale(1.03);
}

.ja-mm-banner--empty {
	padding: 10px;
	background: var(--ja-banner-bg);
	color: var(--ja-muted);
	font-size: var(--ja-fs-sm);
	line-height: 1.7;
	text-align: center;
}

.ja-mm.ja-mm--no-banner .ja-mm-banner {
	display: none;
}

/* ---------------------------------------------------------------- Empty state */
.ja-mm-empty {
	padding: 18px;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	background: #f8fafc;
	color: #64748b;
	font-size: var(--ja-fs-md);
	text-align: center;
}

/* ---------------------------------------------------------------- Trigger / close */
/* The trigger only exists for the mobile overlay. `!important` keeps themes
   (and Elementor popup button styles) from re-displaying it on desktop. */
.ja-mm-trigger {
	display: none !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-bottom: 10px;
	padding: 12px 16px;
	border: 1px solid var(--ja-border, #e2e8f0);
	border-radius: 10px;
	background: var(--ja-bg, #fff);
	color: var(--ja-text, #1e293b);
	font-family: inherit;
	font-size: var(--ja-fs);
	font-weight: 700;
	cursor: pointer;
}

.ja-mm-trigger-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	width: 18px;
}

.ja-mm-trigger-icon span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.ja-mm-trigger-text {
	flex: 1 1 auto;
	text-align: start;
}

.ja-mm-trigger-chevron {
	transition: transform .2s ease;
}

.ja-mm-close {
	display: none !important;
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 20;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--ja-border);
	border-radius: 50%;
	background: var(--ja-bg);
	color: var(--ja-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* ================================================================
   Mobile modes (driven by JS so the breakpoint is configurable)
   ================================================================ */

.ja-mm-shell--mobile.ja-mm-shell--mode-stack .ja-mm {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	grid-template-areas: "logo" "nav" "main";
	height: auto;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-stack .ja-mm.ja-mm--nologo {
	grid-template-rows: auto auto;
	grid-template-areas: "nav" "main";
}

.ja-mm-shell--mobile .ja-mm-banner {
	display: none;
}

.ja-mm-shell--mobile .ja-mm-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	border-inline-end: 0;
	border-bottom: 1px solid var(--ja-border);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ja-mm-shell--mobile .ja-mm-nav::-webkit-scrollbar {
	display: none;
}

.ja-mm-shell--mobile .ja-mm-nav-link {
	flex: 0 0 auto;
	margin-bottom: 0;
	padding: 8px 12px;
	white-space: nowrap;
}

.ja-mm-shell--mobile .ja-mm-nav-link.is-active::before {
	display: none;
}

.ja-mm-shell--mobile .ja-mm-main {
	padding: 16px;
	overflow: visible;
}

.ja-mm-shell--mobile .ja-mm-panel {
	overflow: visible;
}

.ja-mm-shell--mobile .ja-mm-row {
	grid-template-columns: minmax(0, 1fr);
}

.ja-mm-shell--mobile .ja-mm-groups {
	gap: 16px;
}

.ja-mm-shell--mobile .ja-mm-top {
	margin-bottom: 14px;
}

/* ---------------------------------------------------------------- Panes
   Fullscreen two-column sheet: a vertical category rail next to a scrollable
   panel. The rail sits on the inline-start side (right in RTL). */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes .ja-mm-trigger {
	display: flex !important;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes .ja-mm {
	display: none;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm {
	display: grid;
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	grid-template-columns: clamp(104px, 34%, 168px) minmax(0, 1fr);
	/* Same logo band as desktop, then rail + panel. */
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas: "logo logo" "nav main";
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm.ja-mm--nologo {
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "nav main";
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-logo {
	padding-inline-end: 56px;
	border-bottom: 1px solid var(--ja-border);
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-close {
	display: flex !important;
	top: 12px;
	width: 32px;
	height: 32px;
}

/* Without a logo band the sheet has no header: keep the panel clear of the
   floating close button. */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm.ja-mm--nologo .ja-mm-main {
	padding-top: 50px;
}

/* The rail: vertical, scrollable, quiet background. */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 10px 8px 14px;
	overflow-x: hidden;
	overflow-y: auto;
	border-bottom: 0;
	border-inline-end: 1px solid var(--ja-border);
	background: var(--ja-banner-bg);
	background: color-mix(in srgb, var(--ja-p-soft) 30%, var(--ja-bg));
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-nav-link {
	flex: 0 0 auto;
	min-height: 58px;
	margin-bottom: 0;
	padding: 8px 8px;
	border-radius: 10px;
	font-size: var(--ja-fs-sm);
	font-weight: 700;
	line-height: 1.45;
	text-align: start;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-nav-text {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	word-break: break-word;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-nav-icon {
	width: 22px;
	height: 22px;
}

/* Active category reads as an outlined pill, not as a side bar. */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-nav-link.is-active::before {
	display: none;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-nav-link.is-active {
	box-shadow: inset 0 0 0 1.5px var(--ja-p);
}

/* The panel: single column, comfortable touch targets. */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-main {
	padding: 14px 14px 28px;
	overflow: hidden;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-panel {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-top {
	position: sticky;
	top: 0;
	z-index: 2;
	margin-bottom: 14px;
	padding-bottom: 10px;
	background: var(--ja-bg);
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-top-title {
	font-size: var(--ja-fs);
	font-weight: 800;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-row {
	grid-template-columns: minmax(0, 1fr);
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-groups {
	gap: 18px;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-item-wrap {
	padding-bottom: 2px;
}

/* Level 2/3 colours, weights and bars come from the admin tokens, so this
   mode only adds the extra breathing room a touch screen needs. */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-item {
	padding-block: 6px;
	font-size: var(--ja-fs);
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-grandchildren {
	margin-top: 2px;
	padding-inline-start: 12px;
}

/* Extra breathing room for touch, but never at the cost of the level-3
   indent: only unstyled items get the flat 10px inset. */
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-grand,
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-l4-list a {
	display: block;
	padding-block: 5px;
	font-size: var(--ja-fs-sm);
	line-height: 1.7;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-grand:not(.is-styled),
.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-l4-list a {
	padding-inline-start: 10px;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-l4-list {
	margin-top: 0;
	padding-inline-start: 14px;
}

.ja-mm-shell--mobile.ja-mm-shell--mode-panes.is-open .ja-mm-l4-list a {
	font-size: var(--ja-fs-xs);
}

/* Hide mode */
.ja-mm-shell--mobile.ja-mm-shell--mode-hide .ja-mm {
	display: none;
}

/* Inside an Elementor popup the menu is normally rendered inline — the popup
   itself is the overlay, so the trigger and the close button stay hidden.
   The exception is `panes`, which is fullscreen by design: on mobile it takes
   the popup over instead of shrinking into it. JS flags the popup with
   `.ja-mm-popup-fullscreen` and keeps the sheet fixed. */
.elementor-popup-modal .ja-mm-shell .ja-mm-trigger,
[data-elementor-type="popup"] .ja-mm-shell .ja-mm-trigger,
.elementor-popup-modal .ja-mm-shell .ja-mm-close,
[data-elementor-type="popup"] .ja-mm-shell .ja-mm-close {
	display: none !important;
}

/* Strip the popup chrome so the fullscreen sheet really covers the viewport
   and no leftover scrollbar or rounded card shows behind it. */
.ja-mm-popup-fullscreen .dialog-widget,
.ja-mm-popup-fullscreen .dialog-widget-content,
.ja-mm-popup-fullscreen .dialog-message {
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	/* A transformed ancestor would make `position: fixed` resolve against the
	   dialog instead of the viewport. */
	transform: none !important;
	overflow: visible !important;
}

/* The fullscreen sheet needs its own close button — the popup's one sits
   underneath the sheet and can no longer be reached. */
.ja-mm-popup-fullscreen .ja-mm-shell .ja-mm-close,
.elementor-popup-modal.ja-mm-popup-fullscreen .ja-mm-shell .ja-mm-close,
[data-elementor-type="popup"].ja-mm-popup-fullscreen .ja-mm-shell .ja-mm-close {
	display: flex !important;
}

/* Closing the sheet has to take the popup backdrop with it. Elementor's own
   close is animated and the overrides above can stall that animation, which
   left the grey scrim on screen until the next tap. JS adds this class the
   moment the sheet is closed and removes it when the popup re-opens. */
.ja-mm-popup-dismissed {
	display: none !important;
}

/* ================================================================
   Nav menu integration (Appearance → Menus)
   The panel is printed inside the theme's own <li>, so nothing here depends on
   a theme class — the same rules work with any theme.
   ================================================================ */
.ja-mm-navitem {
	position: relative;
}

/* A theme dropdown that would open next to the mega panel is redundant.
   Only sub-menus printed *after* our panel are hidden, so a theme that keeps
   its own markup elsewhere is untouched. */
.ja-mm-navitem--has-panel > .ja-mm-shell--navitem ~ ul,
.ja-mm-navitem--has-panel > .ja-mm-shell--navitem ~ .sub-menu,
.ja-mm-navitem--has-panel > .ja-mm-shell--navitem ~ .dropdown-menu {
	display: none !important;
}

.ja-mm-shell.ja-mm-shell--navitem {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	/* Above sticky headers, chat widgets and the theme's own dropdowns. */
	z-index: 999999;
	width: min(1040px, calc(100vw - 32px));
	max-width: none;
	/* Laid out but invisible: the script can measure it before opening. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, visibility .16s ease;
}

/* Raise the item itself too: a sibling menu item with its own z-index would
   otherwise paint over the panel inside the header's stacking context. */
.ja-mm-navitem.is-open {
	z-index: 999999;
}

/* Set by the script when a theme ancestor clips the dropdown. */
.ja-mm-shell.ja-mm-shell--navitem.is-fixed {
	position: fixed;
	inset-inline-start: auto;
}

/* A dropdown keeps the fixed `--ja-h` height (the «ارتفاع منو» setting), so
   switching between tabs never makes the box jump. Short viewports win over
   that height, and the rail / panel scroll inside the box. The single-tab
   mode is content-height instead — it has nothing to keep in sync. */
.ja-mm-shell--navitem .ja-mm {
	max-height: min(78vh, 760px);
}

.ja-mm-navitem.is-open > .ja-mm-shell--navitem {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Chevron on every item that really opens a mega menu. Injected by navmenu.js
   as a <span> (not a ::after) so a theme that resets pseudo-elements on links,
   or turns the link into a flex box, cannot swallow it.
   Physical borders on purpose: the same rule then points down in both LTR and
   RTL. `flex: none` keeps it from being squeezed to zero in a flex link. */
.ja-mm-arrow {
	display: inline-block;
	flex: none;
	width: 6px;
	height: 6px;
	margin-inline-start: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	vertical-align: middle;
	opacity: .5;
	transition: transform .18s ease, opacity .18s ease;
}

.ja-mm-navitem.is-open .ja-mm-arrow {
	transform: rotate(-135deg) translate(-1px, -1px);
	opacity: 1;
}

/* Dimmed page behind an open dropdown. Created by navmenu.js and inserted next
   to the panel, so it shares the panel's stacking context and can never end up
   above it.
   `pointer-events: none` on purpose: the scrim only dims. Hovering off the item
   still closes the menu and clicks still reach the page (the runtime already
   closes on any outside click). `--ja-scrim` is overridable from the custom CSS
   field. */
.ja-mm-scrim {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: var(--ja-scrim, rgba(15, 23, 42, .45));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, visibility .18s ease;
}

.ja-mm-scrim.is-visible {
	opacity: 1;
	visibility: visible;
}

/* No-JS fallback: hover/focus on desktop only (the script marks touch items). */
@media (min-width: 901px) {
	.ja-mm-navitem:not(.ja-mm-navitem--touch):hover > .ja-mm-shell--navitem,
	.ja-mm-navitem:not(.ja-mm-navitem--touch):focus-within > .ja-mm-shell--navitem {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* Narrow screens: an inline accordion instead of a floating panel. */
.ja-mm-navitem--touch > .ja-mm-shell--navitem {
	position: static;
	width: 100%;
	max-width: 100%;
	display: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	padding-block: 6px;
}

.ja-mm-navitem--touch.is-open > .ja-mm-shell--navitem {
	display: block;
}

.ja-mm-shell--navitem.ja-mm-shell--mobile .ja-mm.ja-mm--panel-only {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-template-areas: "main";
	height: auto;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* Inside a drawer the dropdown should read as part of the menu, not as a
   floating card on top of it — and it grows with its content again. */
.ja-mm-shell--navitem.ja-mm-shell--mobile .ja-mm {
	height: auto;
	max-height: none;
	border-radius: 0;
	box-shadow: none;
}

.ja-mm-shell--navitem.ja-mm-shell--mobile .ja-mm-main {
	padding: 6px 12px 12px;
}

.ja-mm-shell--navitem.ja-mm-shell--mobile .ja-mm-top {
	margin-bottom: 12px;
}

.ja-mm-shell--navitem.ja-mm-shell--mobile .ja-mm-top-title {
	font-size: var(--ja-fs-md);
}

/* ================================================================
   No-JS safety net (before the script boots, at the default 900px)
   ================================================================ */
@media (max-width: 900px) {
	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		grid-template-areas: "logo" "nav" "main";
		height: auto;
	}

	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm.ja-mm--nologo {
		grid-template-rows: auto auto;
		grid-template-areas: "nav" "main";
	}

	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm-banner {
		display: none;
	}

	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm-nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		border-inline-end: 0;
		border-bottom: 1px solid var(--ja-border);
	}

	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm-nav-link {
		flex: 0 0 auto;
		margin-bottom: 0;
		white-space: nowrap;
	}

	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.ja-mm-shell:not(.ja-mm-shell--ready) .ja-mm-groups {
		gap: 16px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ja-mm-shell * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}