/* Drill-down mobile menu. RTL by default; flips automatically for LTR pages. */

.dm {
	--dm-brand: #7029E4;
	--dm-ink: #1E0B3F;
	--dm-soft: #F6F2FD;
	--dm-line: #E9E1FA;
	--dm-muted: #6B5C8A;
	--dm-in: -100%;   /* where a panel waits before it enters */
	--dm-out: 100%;   /* where a panel goes when a child opens */
	--dm-flip: 1;

	position: relative;
	overflow: hidden;
	color: var(--dm-ink);
	font-size: 16px;
	line-height: 1.6;
	/* 56px = height of the popup top strip that holds the close button */
	height: var(--dm-h, calc(100vh - 56px));
	height: var(--dm-h, calc(100dvh - 56px));
}

[dir="ltr"] .dm {
	--dm-in: 100%;
	--dm-out: -100%;
	--dm-flip: -1;
}

.dm ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-stage {
	position: absolute;
	inset: 0;
}

/* ---------- Panels ---------- */

.dm-panel {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	transform: translateX(var(--dm-in));
	visibility: hidden;
	transition: transform .28s ease, visibility 0s linear .28s;
}

.dm-panel.is-active {
	transform: none;
	visibility: visible;
	transition: transform .28s ease;
}

.dm-panel.is-out {
	transform: translateX(var(--dm-out));
	visibility: hidden;
	transition: transform .28s ease, visibility 0s linear .28s;
}

/* ---------- Rows ---------- */

.dm-panel li {
	border-bottom: 1px solid var(--dm-line);
}

.dm-panel li > a,
.dm-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 500;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.dm-panel li > a:hover,
.dm-next:hover {
	background: var(--dm-soft);
	color: var(--dm-ink);
}

.dm-panel li.current-menu-item > a,
.dm-panel li.current-menu-ancestor > .dm-next {
	color: var(--dm-brand);
	font-weight: 700;
}

.dm-chev {
	flex: none;
	color: var(--dm-brand);
	transform: scaleX(var(--dm-flip));
}

/* "View all" row at the top of every submenu */
.dm-panel .dm-all > a {
	background: var(--dm-soft);
	color: var(--dm-brand);
	font-weight: 700;
}

/* ---------- Header of a submenu ---------- */

.dm-head {
	position: sticky;
	top: 0;
	z-index: 1;
	padding-bottom: 14px;
	background: var(--dm-soft);
	border-bottom: 1px solid var(--dm-line);
}

.dm-back {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 12px 20px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dm-brand);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.dm-back:hover {
	background: none;
	color: var(--dm-brand);
}

.dm-back .dm-chev {
	transform: scaleX(calc(var(--dm-flip) * -1));
}

.dm-crumb {
	margin: 0;
	padding: 0 20px;
	color: var(--dm-muted);
	font-size: 13px;
}

.dm-title {
	margin: 2px 0 0;
	padding: 0 20px;
	font-size: 19px;
	font-weight: 700;
}

/* ---------- Accessibility ---------- */

.dm button:focus-visible,
.dm a:focus-visible {
	outline: 2px solid var(--dm-brand);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.dm-panel,
	.dm-panel.is-active,
	.dm-panel.is-out {
		transition: none;
	}
}

/* =====================================================================
   Elementor popup shell (only popups that contain the menu)
   Mobile: popup is 80% of the screen width, full height, menu fills it.
   If these ever clash with the popup's own settings, the settings panel
   values still apply; !important is used only where Elementor sets
   inline/ID-level sizes.
   ===================================================================== */

.dm {
	width: 100%;
}

/* The popup box */
.elementor-popup-modal .dialog-widget-content:has(.dm) {
	width: 80vw !important;
	max-width: none !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-height: none !important;
	border-radius: 0 !important;
	background: #fff;
	overflow: hidden;
}

@media (min-width: 768px) {
	.elementor-popup-modal .dialog-widget-content:has(.dm) {
		width: 420px !important;
	}
}

/* Inner wrapper: no padding, full height, only the panels scroll */
.elementor-popup-modal .dialog-message:has(.dm) {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Strip a plain Elementor container/section around the shortcode */
.elementor-popup-modal .dialog-message:has(.dm) .e-con,
.elementor-popup-modal .dialog-message:has(.dm) .e-con-inner {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	padding: 0 !important;
	width: 100%;
	max-width: 100%;
	min-height: 0;
}

.elementor-popup-modal .dialog-message:has(.dm) .elementor-container,
.elementor-popup-modal .dialog-message:has(.dm) .elementor-column-wrap,
.elementor-popup-modal .dialog-message:has(.dm) .elementor-widget-wrap,
.elementor-popup-modal .dialog-message:has(.dm) .elementor-widget-container,
.elementor-popup-modal .dialog-message:has(.dm) .elementor-element-populated {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100%;
}


/* Close button: round, inside the strip, easy to reach */
.elementor-popup-modal .dialog-widget-content:has(.dm) .dialog-close-button {
	position: absolute;
	top: 8px;
	inset-inline-end: 12px;
	inset-inline-start: auto;
	margin: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dm-soft, #F6F2FD);
	color: var(--dm-brand, #7029E4);
	font-size: 18px;
	line-height: 1;
	z-index: 5;
	opacity: 1;
}

.elementor-popup-modal .dialog-widget-content:has(.dm) .dialog-close-button svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.elementor-popup-modal .dialog-widget-content:has(.dm) .dialog-close-button:hover {
	background: var(--dm-brand, #7029E4);
	color: #fff;
}