.::Undergrounds v3.3 Webshells::.

: / home / sc1jaqa5103 / prod.puv-editions.fr / wp-content / plugins / megamenu / css / admin /
Filename : admin.scss
back
@use 'sass:math' as math;
@use 'sass:color' as color;

// Megamenu admin neutral ramp (aligned with WP admin neutrals; override per site/theme via `:root`).
:root {
	--wp--preset--font-family--material-symbols: "Material Symbols", monospace;
	--black: #1e1e1e; /* WP Base black */
	--dark-gray: #2f2f2f; /* WP editor dark */
	--semidark-gray: #3c3c3c; /* WP toolbar grey */
	--gray: #757575; /* WP secondary text */
	--medium-gray: #a7aaad; /* WP input border */
	--light-gray: #dcdcde; /* WP surface border */
	--feather-gray: #f6f7f7; /* WP sidebar background */
}

// Matches `:root` `--black`; used for Sass `color.change` shadow alphas.
$-shadow-source: #1e1e1e;

$success: #46b450;

$error: #d0011b;
$error-link: #b32d2e;
$error-link-hover: #8a2424;
$error-surface: #ffdddd;
$warning: #ffb900;

// Native fields in plugin admin: `body.maxmegamenu-admin` sets `--megamenu-form-control-border` (use `var(--megamenu-form-control-border, var(--gray))` at use sites).

// Horizontal gap between settings-page rail nav and main canvas (matches dialog rail column width intent).
$megamenu-settings-rail-gap: 24px;

// Alpha / composed shadows (tinted to match `--black`); focus halos use `--wp-admin-theme-color--rgb`.
// Five levels: feather (a05) → light (a07) → mid (a12) → strong (a22) → scrim (a45).
$shadow-a05: color.change($-shadow-source, $alpha: 0.05);
$shadow-a07: color.change($-shadow-source, $alpha: 0.07);
$shadow-a12: color.change($-shadow-source, $alpha: 0.12);
$shadow-a22: color.change($-shadow-source, $alpha: 0.22);
$shadow-a45: color.change($-shadow-source, $alpha: 0.45);

// Semantic elevation — four levels covering every shadow use in this file.
$shadow-small:       0 1px 2px $shadow-a07;
$shadow-small-hover: 0 1px 2px $shadow-a05, 0 4px 16px $shadow-a07;
$shadow-large:       0 1px 2px $shadow-a12, 0 12px 48px -8px $shadow-a22;
$shadow-large-hover: 0 4px 28px $shadow-a22;
// Chevron for `.mega-toolbar-native-select` (inline-end; `+ 3px` nudges left vs a 10px baseline).
$mega-toolbar-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23757575' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' d='M2.75 4.5L6 7.75 9.25 4.5'/%3E%3C/svg%3E");
// Modal chrome (Gutenberg / component-style dialogs)
$modal-radius: 10px;
$modal-padding-x: 36px;

@function wp-admin-theme-rgba($alpha) {
	@return #{'rgba(var(--wp-admin-theme-color--rgb), #{$alpha})'};
}

$focus-ring-blue-soft: wp-admin-theme-rgba(0.4);
$focus-ring-blue-strong: wp-admin-theme-rgba(0.45);

$mega-admin-icon-hit: 40px;
$mega-admin-icon-glyph: 24px;

// Standard `:focus-visible` ring for admin controls (color + offset; use inside `&:focus-visible { }`).
@mixin mega-admin-focus-ring($color: var(--wp-admin-theme-color), $outline-offset: 2px) {
	outline: 2px solid $color;
	outline-offset: $outline-offset;
}

@mixin tablet {
	@media only screen and (max-width: 1200px) {
		@content;
	}
}

@mixin megamenu-admin-icon-dashicon-child($size: $mega-admin-icon-glyph) {
	.dashicons {
		width: $size;
		height: $size;
		font-size: $size;
		line-height: 1;
		speak: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@mixin megamenu-admin-icon-button-secondary-layout(
	$hit: $mega-admin-icon-hit,
	$icon: $mega-admin-icon-glyph
) {
	box-sizing: border-box;
	flex-shrink: 0;
	width: $hit;
	min-width: $hit;
	height: $hit;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;

	@include megamenu-admin-icon-dashicon-child($icon);
}

@mixin megamenu-admin-modal-button-secondary {
	&:not(.is-active) {
		border: 0;
		color: var(--gray);
	}
}

// Modal "ghost" icon buttons: align with Gutenberg `.components-button` (foreground default,
// accent on hover) + document-toolbar sizing / focus / theme-tint surfaces.
@mixin megamenu-admin-modal-ghost-icon-btn {
	$ghost-foreground: var(--wp-components-color-foreground, var(--black));
	$ghost-hover-fg: var(--wp-components-color-accent, var(--wp-admin-theme-color));

	appearance: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	text-shadow: none;
	color: $ghost-foreground;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	margin: 0;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-sizing: border-box;
	flex-shrink: 0;
	cursor: pointer;
	outline: 1px solid transparent;
	transition:
		background 0.1s linear,
		box-shadow 0.1s linear,
		color 0.1s ease;

	@include megamenu-admin-icon-dashicon-child($mega-admin-icon-glyph);

	.dashicons {
		color: currentColor;
	}

	&:visited {
		color: $ghost-foreground;
	}

	&:hover:not(:disabled) {
		color: $ghost-hover-fg;
		background: wp-admin-theme-rgba(0.04);

		@supports (background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent)) {
			background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
		}
	}

	&:active:not(:disabled) {
		background: wp-admin-theme-rgba(0.08);

		@supports (background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, transparent)) {
			background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, transparent);
		}
	}

	&:focus {
		outline: 1px solid transparent;
	}

	// Block editor document toolbar: outer theme ring + inset white (see `editor/style.css`).
	&:focus:not(:active) {
		box-shadow:
			0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color),
			inset 0 0 0 1px #fff;
	}

	&:disabled {
		color: var(--medium-gray);
		background: transparent;
		opacity: 1;
		box-shadow: none;
	}
}

// Icon + label compact buttons: menu location card footer + location modal Settings/Preview toggle.
@mixin megamenu-location-toolbar-button-layout {
	display: inline-flex;
	align-items: center;
	gap: 5px;

	.dashicons {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		font-size: 16px;
		line-height: 1;
	}
}

// Segmented mode pills (sliding theme thumb): header Settings/Preview + preview footer Desktop/Mobile.
@mixin megamenu-location-settings-dialog-mode-pill-track {
	gap: 4px;
	align-self: center;
	padding: 3px;
	border-radius: 999px;
	border: 1px solid var(--light-gray);
	background: var(--light-gray);
	box-sizing: border-box;
	overflow: visible;
	position: relative;

	.megamenu-location-settings-dialog__mode-pill-slider {
		position: absolute;
		z-index: 0;
		pointer-events: none;
		inset-block: 3px;
		inset-inline-start: 3px;
		width: calc((100% - 10px) / 2);
		border-radius: 999px;
		background: var(--wp-admin-theme-color);
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	@media (prefers-reduced-motion: reduce) {
		.megamenu-location-settings-dialog__mode-pill-slider {
			transition-duration: 0.01ms;
		}
	}
}

@mixin megamenu-location-settings-dialog-mode-pill-slider-to-second(
	$second-active-selector
) {
	&:has(#{$second-active-selector}) .megamenu-location-settings-dialog__mode-pill-slider {
		transform: translateX(calc(100% + 4px));
	}

	[dir="rtl"] &:has(#{$second-active-selector}) .megamenu-location-settings-dialog__mode-pill-slider {
		transform: translateX(calc(-100% - 4px));
	}
}

@mixin megamenu-location-settings-dialog-mode-pill-buttons {
	.megamenu-location-toolbar-btn.megamenu-location-settings-dialog__mode-btn {
		position: relative;
		z-index: 1;
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		margin: 0;
		border: 0;
		border-radius: 999px;
		box-shadow: none;
		background: transparent;
		color: var(--black);
		font-size: 13px;
		font-weight: 400;
		line-height: 1.3;
		padding: 6px 14px;
		min-height: 30px;
		transition:
			color 0.2s ease,
			background 0.12s ease;

		.dashicons {
			color: var(--gray);
			transition: color 0.2s ease;
		}

		&:focus {
			box-shadow: none;
		}

		&:focus-visible {
			@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
			z-index: 2;
		}

		&:not(.is-active) {
			&:hover:not(:disabled) {
				background: color-mix(in srgb, var(--black) 4%, var(--feather-gray));
			}
		}

		&.is-active {
			background: transparent;
			color: white;
			border: 0;

			.dashicons {
				color: white;
			}

			&:focus-visible {
				outline-color: white;
			}
		}
	}
}

// Dashicon tile rendered on `::before` (menu icon grid).
@mixin megamenu-admin-icon-pseudo-dashicon-tile(
	$hit: $mega-admin-icon-hit,
	$glyph: $mega-admin-icon-glyph
) {
	box-sizing: border-box;
	width: $hit;
	height: $hit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--gray);
	line-height: 1;
	font-size: $glyph;
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

// Shared positioning when `.megamenu-modal-close` is not inside `.megamenu-admin-modal__header-actions`.
@mixin megamenu-modal-close-button {
	position: absolute;
	top: 14px;
	right: 12px;
	z-index: 2;
}

.megamenu-modal-close {
	@include megamenu-modal-close-button;
}


// Sliding underline shared by Menu Themes tabs and the location settings dialog.
@mixin nav-tab-slider-indicator {
	.nav-tab-slider {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		background-color: var(--wp-admin-theme-color);
		border-radius: 2px;
		transition: left 0.3s ease-out, width 0.3s ease-out;
		z-index: 1;
	}
}

// Column span control pill: grid `.mega-col-header > .mega-col-span` + standard `.mega-widget-title-action .mega-col-span`.
@mixin mega-col-span-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 3px 2px;
	border-radius: 9999px;
	box-sizing: border-box;
	background: white;
	border: 1px solid var(--wp-admin-theme-color);
	color: var(--wp-admin-theme-color);
}

// Shared vertical rail tabs: Appearance > Menus menu-item modal body + location settings modal.
@mixin megamenu-dialog-side-tab(
	$accent: var(--wp-admin-theme-color),
	$active-bg: transparent
) {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 100%;
	display: block;
	padding: 10px 12px;
	box-sizing: border-box;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	text-align: start;
	color: var(--black);
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 0;
	margin-bottom: 2px;
	border-inline-start: 3px solid transparent;
	background: transparent;

	&:focus-visible {
		@include mega-admin-focus-ring($accent);
	}

	&:hover {
		background: var(--feather-gray);
		color: var(--black);
		border-color: transparent;
	}

	&.is-active {
		color: $accent;
		background: $active-bg;
		border-color: transparent;
		font-weight: 600;
		box-shadow: none;
		border-inline-start-color: $accent;

		&:before {
			color: $accent;
		}

		&:after {
			display: none;
		}
	}
}

// Menu item modal: dashed “add widget to this column” slot (`.mega-col-add-widget`) — reused e.g. for “add another menu location”.
@mixin mega-col-add-widget-appearance {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 32px;
	padding: 6px 8px;
	border: 1px dashed var(--light-gray);
	border-radius: 4px;
	background: var(--feather-gray);
	cursor: pointer;
	color: var(--gray);
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;

	.dashicons {
		font-size: 18px;
		width: 18px;
		height: 18px;
		line-height: 1;
		opacity: 0.45;
		transition: opacity 0.2s ease;
	}

	&:hover,
	&:focus-visible {
		color: var(--wp-admin-theme-color);
		border-color: $focus-ring-blue-strong;
		background: white;

		.dashicons {
			opacity: 1;
		}
	}

	&:focus-visible {
		@include mega-admin-focus-ring;
	}
}

@mixin megamenu-dialog-rail-grid($column-gap: 0, $row-gap: 0) {
	display: grid;
	grid-template-columns: 230px 1fr;
	grid-template-rows: minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	column-gap: $column-gap;
	row-gap: $row-gap;
}

@mixin megamenu-dialog-tablist-shell {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	position: relative;
	min-height: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
}

@mixin megamenu-dialog-panels-shell($overflow: auto) {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	min-height: 0;
	overflow: $overflow;
	box-sizing: border-box;
	position: relative;
	border: 0;
}

// Tooltip bubble: any element with [data-mega-tooltip] (plain text and/or dual enabled/disabled). Always centered below the trigger.
@mixin tooltip-popup-base {
	&:before {
		position: absolute;
		content: attr(data-mega-tooltip);
		top: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		background: white;
		color: var(--black);
		padding: 6px 10px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
		border-radius: 2px;
		border: 1px solid var(--gray);
		box-shadow: $shadow-small;
		margin-left: 0;
		width: auto;
		max-width: 280px;
		white-space: nowrap;
		box-sizing: border-box;
		z-index: 101;
		text-align: center;
	}

	// Bordered chevron (not a filled triangle): rotated square so stroke meets the bubble border.
	&:after {
		content: "";
		position: absolute;
		top: calc(100% + 6px);
		left: 50%;
		width: 9px;
		height: 9px;
		margin: 0;
		background: white;
		border-left: 1px solid var(--gray);
		border-top: 1px solid var(--gray);
		border-right: none;
		border-bottom: none;
		box-sizing: border-box;
		transform: translate(-50%, -50%) rotate(45deg);
		z-index: 102;
	}

	&:before,
	&:after {
		opacity: 0;
		pointer-events: none;
		text-align: center;
		transition: opacity 0.3s ease;
		transition-delay: 0.3s;
	}

	&:focus:before,
	&:focus:after,
	&:focus-visible:before,
	&:focus-visible:after,
	&:hover:before,
	&:hover:after {
		opacity: 1;
	}
}

// Percent widths via nested @for — used by #megamenu-standard (data-columns) only.
@mixin grid-col-widths($container-attr, $item-selector, $item-attr) {
	@for $of from 1 through 12 {
		@for $cols from 1 through $of {
			&[#{$container-attr}='#{$of}'] #{$item-selector}[#{$item-attr}='#{$cols}'] {
				width: math.percentage(math.div($cols, $of));
			}
		}
	}
}

// Full-cell overlay used to visually disable table rows.
@mixin disabled-row-overlay {
	background: var(--feather-gray);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	content: "";
	opacity: 0.5;
	z-index: 9;
}

// Small caps label above a native `<select>` (matches Menu Themes `.theme-selector-field .mega-short-desc`).
@mixin mega-toolbar-field-label {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--semidark-gray);
	display: block;
	margin: 0 0 2px 1px;
}

// Theme editor only: custom chevron + chrome (dialogs use native / WP admin `<select>` styling).
@mixin mega-toolbar-native-select {
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	width: 300px;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0 34px 0 10px;
	border: 1px solid var(--megamenu-form-control-border, var(--gray));
	border-radius: 4px;
	background-color: white;
	background-image: $mega-toolbar-select-chevron;
	background-repeat: no-repeat;
	background-position: right calc(10px + 3px) center;
	background-size: 12px 12px;
	color: var(--semidark-gray);
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	box-shadow: none;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;

	&:hover,
	&:focus {
		color: var(--black);
		background-color: var(--feather-gray);
		border-color: var(--gray);
		background-image: $mega-toolbar-select-chevron;
	}

	&:focus-visible {
		@include mega-admin-focus-ring;
		border-color: var(--wp-admin-theme-color);
		background-image: $mega-toolbar-select-chevron;
	}

	&:disabled {
		opacity: 0.6;
		cursor: default;
		background-color: var(--feather-gray);
		border-color: var(--megamenu-form-control-border, var(--gray));
		background-image: $mega-toolbar-select-chevron;
	}
}

// Icon-only destructive control (widget form footer + toggle bar block settings).
@mixin mega-admin-trash-icon-button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	font: inherit;
	cursor: pointer;
	color: $error;
	text-decoration: none;

	.dashicons {
		width: 20px;
		height: 20px;
		font-size: 20px;
		line-height: 1;
	}

	&:hover,
	&:focus-visible {
		color: $error-link-hover;
		background: $error-surface;
	}

	&:focus-visible {
		@include mega-admin-focus-ring;
	}
}

// Card chrome for theme editor fields (e.g. toggle block picker). Menu Themes `.theme_selector` in the dialog rail uses plain layout only (no card shell).
@mixin mega-theme-editor-card-shell {
	padding: 16px 20px;
	border-radius: 8px;
	border: 1px solid var(--megamenu-form-control-border, var(--gray));
	background: var(--feather-gray);
	box-shadow: $shadow-small;
	color: var(--semidark-gray);
	box-sizing: border-box;
	transition: box-shadow 0.2s ease;

	&:hover {
		box-shadow: $shadow-small-hover;
	}
}

// Field label stack: table name cells (`td.mega-name`) and location modal Display Options (`.mmm-location-output-options__name.mega-name` — both use `.megamenu_outer_wrap`).
body.maxmegamenu-admin .megamenu_outer_wrap {
	.mega-name:has(.mega-description) .mega-name-title {
		font-weight: 500;
	}

	.mega-description {
		font-size: 13px;
		color: var(--gray);
		line-height: 1.5em;
		width: 80%;

		p {
			font-size: 12px;
		}
	}
}

body.maxmegamenu-admin .megamenu_outer_wrap table {

	width: 100%;
	border-collapse: collapse;

	label {
	    font-size: 0.9em;
	    display: inline-block;
	}

	h5 {
		font-size: 16px;
		margin: 0;
	}

	.mega-radio-row {
		// `td.mega-value` is a row flex container; without a full line basis, rows sit side-by-side.
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		margin: 0;

		input[type="radio"] {
			margin: 0;
			flex-shrink: 0;
		}

		label {
			float: none;
			position: static;
			top: auto;
			margin: 0;
			font-size: 1em;
			line-height: 1.4;
		}
	}

	textarea,
	input[type=text],
	input[type=number],
	select {
		font-size: 12px;
		min-height: 28px;
		line-height: 26px;
	}

	textarea {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		font-family: monospace;
		min-height: 150px;
	}

	input[type=number] {
		height: auto;
	}

	input[name=export] {
		margin-top: 20px;
	}

	input[type=text] {
		min-width: 70px;
		field-sizing: content;
	}

	input[type=text].wide {
		width: 300px;
	}

	input[type=submit] {
		width: auto;
	}

	input[type=checkbox] {
		margin-top: 2px;
		vertical-align: middle;
	}

	.wide input[type=text] {
		width: 300px;
	}
	
	.CodeMirror {
		width: 100%;
		height: auto;
	    min-height: 150px;
		border: 1px solid var(--megamenu-form-control-border, var(--gray));
	}

	div.CodeMirror span.CodeMirror-matchingbracket {
		color: green;
	}

	.CodeMirror-scroll {
		min-height: 150px;
	}

	th {
		text-align: left;
	}

	td {
		position: relative;
		padding-bottom: 25px;
		padding-top: 15px;

		&.mega-name {
			width: 33%;
			line-height: 2em;
			padding-right: 30px;
			vertical-align: top;
		}

		&.mega-name-wide {
			width: 50%;
		}

		&.mega-value {
			min-width: 0;
			padding-top: 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 10px;

			> label {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin: 0;
			}

			// Custom icon (Pro): same label + `.mega-short-desc` + number + unit pattern as theme rows,
			// but row layout so the unit stays on the line with the input (overrides column `> label` above).
			> label.mega-desc-with-input {
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				gap: 6px;
				float: none;
				width: auto;
				max-width: 100%;
				min-width: 0;
				box-sizing: border-box;

				.mega-short-desc {
					flex: 1 0 100%;
					float: none;
					width: auto;
				}

				// Keep digit-sized fields from stretching in the flex row (icon/logo width & height in Pro).
				input[type='number'] {
					flex: 0 0 auto;
					width: auto;
					min-width: 3.5em;
					max-width: 6em;
				}

				.mega-after {
					flex: 0 0 auto;
					display: inline;
					float: none;
					margin: 0;
					vertical-align: middle;
					line-height: inherit;
					height: auto;
					border: 0;
					background: none;
					box-shadow: none;
					padding: 0;
				}
			}

			form {
				width: 100%;
			}

			// Full-width blocks (e.g. Menu Locations card grid): flex row would otherwise shrink-wrap.
			> p,
			> .mega-location-cards-root {
				flex: 1 1 100%;
				width: 100%;
				min-width: 0;
				box-sizing: border-box;
			}

			.mega-description {
				margin-top: 5px;
			}

			.mega-info {
				flex: 1 1 100%;
				display: block;
				font-size: 0.9em;
				color: var(--gray);
				line-height: 20px;
				width: 100%;

				&:before {
					font: 400 20px/1 dashicons;
					content: "\f348";
					speak: none;
					padding: 0;
					margin-right: 6px;
					display: inline-block;
					vertical-align: top;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}

			#megamenu-theme-textarea-custom_css {
				flex: 1 1 100%;
				width: 100%;
				min-width: 0;
				align-self: stretch;
			}
		}

	}	


	ul.custom_styling_tips {
		list-style-type: disc;
		list-style-position: inside;

		code {
			margin: 10px 0 0 0;
			font-size: 0.9em;
		}
	}

	label.mega-error input {
		border: 1px solid $error;
		background: $error-surface;
	}

	div.mega-toggle_blocks {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		cursor: auto;
		font-size: 1em;

		.mega-value {
		    padding-bottom: 0;
		}

		.toggle-bar-designer {
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
			position: relative;

			.mega-blocks {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				min-width: 0;
			}

			.mega-blocks .mega-left,
			.mega-blocks .mega-center,
			.mega-blocks .mega-right {
			    box-sizing: border-box;
			    border: 1px solid var(--light-gray);
			    background: var(--feather-gray);
			    height: 60px;
			    padding: 10px;
			    margin-top: 15px;
			    display: flex;
			    flex-basis: 33.3333%;
			}
			.mega-blocks .mega-left {
				border-right: 0;
				flex: 1;
			}
			.mega-blocks .mega-center {
			    border-left: 1px dashed var(--light-gray);
			    border-right: 1px dashed var(--light-gray);
			    justify-content: center;
			}
			.mega-blocks .mega-right {
			    border-left: 0;
			    flex: 1;
			    justify-content: flex-end;
			}
			.mega-blocks .mega-right .block {
			    margin: 0 0 0 5px;
			}
			.mega-blocks .block.mega-open .block-title {
			    border-bottom: 1px solid white;
			    border-radius: 3px 3px 0 0;
			}
			.mega-blocks .block .block-title {
			    padding: 0 10px;
			    display: inline-block;
			    height: 35px;
			    line-height: 35px;
			    font-size: 0.9em;
			    background: white;
			    color: var(--semidark-gray);
			    cursor: move;
			    border: 1px solid var(--light-gray);
			    position: relative;
			    z-index: 2;
			    border-radius: 3px;
			    text-align: left;
			    box-sizing: border-box;
			    white-space: nowrap;
			}

			.mega-blocks .block.ui-sortable-helper {
			    width: auto !important;
			}

			.mega-blocks .block .block-title .dashicons {
			    line-height: 35px;
			    cursor: pointer;
			    font-size: 20px;
			}

			.mega-blocks .block .block-settings {
			    padding: 10px;
			    display: none;
			    width: 300px;
			    vertical-align: top;
			    background: white;
			    text-align: left;
			    color: var(--semidark-gray);
			    position: absolute;
			    left: 0px;
			    top: 34px;
			    z-index: 1;
			    border: 1px solid var(--megamenu-form-control-border, var(--gray));
			}

			.mega-blocks .block.mega-open {
				position: static;

				.block-settings {
					position: fixed;
					left: 160px;
					right: 0;
					margin-left: auto;
					margin-right: auto;
					top: 50%;
					bottom: auto;
					width: calc(100% - 160px - 10%);
					transform: translateY(-50%);
					z-index: 40;
					max-width: 700px;
					height: max-content;
					min-width: 0;
					min-height: 0;
					overflow: visible;
					border-radius: 4px;
					box-shadow:
						$shadow-large-hover,
						0 0 0 1px $shadow-a07;
					border: none;
				}
			}

			.mega-blocks .block .block-settings-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 8px;
				margin-bottom: 10px;
				padding-bottom: 10px;
				border-bottom: 1px solid var(--light-gray);

				h3 {
					margin: 0;
					padding: 0;
					border: 0;
					flex: 1;
				}

				.mega-block-close {
					flex-shrink: 0;
					background: none;
					border: 0;
					padding: 2px;
					cursor: pointer;
					color: var(--gray);
					line-height: 1;

					&:hover {
						color: var(--semidark-gray);
					}

					.dashicons {
						font-size: 18px;
						width: 18px;
						height: 18px;
					}
				}
			}

			.mega-blocks .block h3 {
			    margin-top: 5px;
			    border-bottom: 1px solid var(--light-gray);
			    padding-bottom: 10px;
			}

			// Label text left, inputs grouped on the right (sentence case — no toolbar all-caps).
			.block-settings > label {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;
				gap: 8px 12px;
				box-sizing: border-box;
				margin: 0 0 12px 0;
				font-size: 13px;
				font-weight: 400;
				line-height: 1.4;
				color: var(--semidark-gray);
				text-transform: none;
			}

			.block-settings > label:last-of-type {
				margin-bottom: 0;
			}

			.block-settings > label .mega-description {
				flex: 1 0 100%;
				width: 100%;
				text-transform: none;
				font-size: 12px;
				font-weight: 400;
				line-height: 1.45;
				color: var(--gray);
				margin: 4px 0 0;
			}

			.block-settings > label input,
			.block-settings > label select,
			.block-settings > label input[type='number'],
			.block-settings > label .icon_dropdown,
			.block-settings > label .select2-container {
				flex: 0 1 auto;
				width: auto;
				min-width: 0;
				max-width: min(240px, 58%);
				margin-left: auto;
				box-sizing: border-box;
				font-size: 14px;
				font-weight: 400;
				text-transform: none;
				color: var(--semidark-gray);
			}

			.block-settings > label textarea {
				flex: 0 1 auto;
				width: auto;
				min-width: 0;
				max-width: min(100%, 320px);
				min-height: 80px;
				margin-left: auto;
				box-sizing: border-box;
				font-size: 14px;
				font-weight: 400;
				text-transform: none;
				color: var(--semidark-gray);
			}

			.block-settings > label input[type='number'] {
				height: 32px;
				line-height: 32px;
			}

			.block-settings > label .mmm_image_selector {
				flex: 0 1 auto;
				margin-left: auto;
				max-width: min(240px, 58%);
			}

			.block-settings .mega-color-picker-input-text {
				display: none;
			}

			// Beat `.mega-blocks .block input[type=text] { width: 50%; }` — keep controls on the right, not half-bar width.
			.mega-blocks .block .block-settings > label input[type='text'],
			.mega-blocks .block .block-settings > label input[type='number'] {
				width: auto;
				max-width: min(240px, 58%);
			}

			.mega-blocks .block .block-settings > label textarea {
				width: auto;
				max-width: min(100%, 320px);
			}

			.block-settings-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16px;

				.mega-delete {
					@include mega-admin-trash-icon-button;
				}
			}

			.block-settings .mega-delete {
				@include mega-admin-trash-icon-button;
				margin-top: 12px;
			}

			.toggle-left {
				border-right: 1px dashed var(--light-gray);
			}

			.toggle-right {
			    border-left: 0px solid var(--light-gray);
			    text-align: right;

			}

			.mega-blocks .block {
			    position: relative;
			    display: inline-block;
			    vertical-align: top;
			    margin: 0 5px 0 0;
			}
		}
	}


	.mega-validation-message {
	    display: none;
	    font-size: 0.8em;
	    color: $error;
	}

	label span.mega-short-desc {
		font-size: 11px;
		text-transform: uppercase;
		color: var(--gray);
		display: block;
		margin: 0 0 5px;
	}

	label.mega-copy_color {
	    margin-right: 3px;

	    span.mega-short-desc {
		    visibility: hidden;
		}

		span.dashicons {
		    opacity: 0.5;
		    margin-top: 6px;
		    font-size: 16px;
		    cursor: pointer;
		}
	}

	label:has(textarea) {
		width: 100%;
	}

	// Menu item + sub-menu align rows: `select` + `.mega-description` on one line.
	// Global `.mega-description { width: 80% }` above would force the description to ~80% of the cell,
	// so it wraps below the select; override so both rows match.
	.mega-menu-item-align,
	.mega-sub-menu-align {
		td.mega-value {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 10px;

			select {
				float: none;
				flex: 0 0 auto;
			}

			.mega-description {
				float: none;
				margin-left: 0;
				margin-right: 0;
				margin-top: 0;
				width: auto;
				max-width: 100%;
				flex: 1 1 auto;
				min-width: 0;
			}
		}
	}

}

// Compile-error SCSS dump (WP admin notice + AJAX notice): CodeMirror lives outside `.megamenu_outer_wrap table`.
body.maxmegamenu-admin .megamenu-compile-failed-scss-editor {
	.CodeMirror {
		max-height: 480px;
	}

	.CodeMirror-scroll {
		max-height: 480px;
	}
}

// Menu item modal: label column vertical padding (overrides global `.megamenu_outer_wrap table td`).
body.maxmegamenu-admin .megamenu-menu-item-dialog .megamenu_outer_wrap table td.mega-name {
	padding-top: 10px;
	padding-bottom: 10px;
}

// All Max Mega Menu admin modals: label column (`td.mega-name`) width and gutter.
body.maxmegamenu-admin .megamenu-admin-modal .megamenu_outer_wrap table td.mega-name {
	width: 40%;
	padding-right: 10px;
}

// Pro "Styling" tab: name/enable column widths + row striping; dim name/value from checkbox via :has (no JS).
body.maxmegamenu-admin.nav-menus-php .megamenu-menu-item-dialog .megamenu_outer_wrap .megamenu_content.styling {
	.mega-name {
		width: 40%;
	}

	.mega-enable {
		width: 1%;
	}

	td.mega-enable:after {
		display: none;
	}

	tr:has(.override_toggle_enabled:checked) td:after {
		display: none;
	}

	tr:has(.override_toggle_enabled:not(:checked)) td.mega-name,
	tr:has(.override_toggle_enabled:not(:checked)) td.mega-value {
		opacity: 0.45;
		filter: grayscale(0.15);
		transition: opacity 0.15s ease, filter 0.15s ease;
	}

	tr:has(.override_toggle_enabled:checked) td.mega-name,
	tr:has(.override_toggle_enabled:checked) td.mega-value {
		opacity: 1;
		filter: none;
	}

	td {
		position: relative;
		padding: 10px;
		vertical-align: middle;
	}

	td:after {
		content: "";
		background: var(--light-gray);
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		z-index: -1;
		pointer-events: none;
	}
}

body.rtl.maxmegamenu-admin.nav-menus-php {
	.megamenu_launch {
		margin-left: 0;
		margin-right: 8px;
	}
	.megamenu-menu-item-dialog .megamenu_outer_wrap.megamenu-dialog-rail {
		grid-template-columns: 1fr 230px;
	}
	.megamenu-menu-item-dialog .megamenu_outer_wrap .mega-tablist {
		grid-column: 2;
	}
	.megamenu-menu-item-dialog .megamenu_outer_wrap .megamenu-dialog-panels {
		grid-column: 1;
	}
	.megamenu-menu-item-dialog .megamenu-admin-modal__title {
		flex-direction: row-reverse;
	}
	.megamenu-menu-item-dialog .megamenu_outer_wrap table .mega-menu-item-align td.mega-value,
	.megamenu-menu-item-dialog .megamenu_outer_wrap table .mega-sub-menu-align td.mega-value {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px;

		select {
			float: none;
			flex: 0 0 auto;
		}

		.mega-description {
			float: none;
			margin-left: 0;
			margin-right: 0;
			margin-top: 0;
			width: auto;
			max-width: 100%;
			flex: 1 1 auto;
			min-width: 0;
		}
	}
	.megamenu-menu-item-dialog .megamenu_outer_wrap .mega-tablist button.is-active:after {
		right: auto;
		left: 0;
	}
	.megamenu-menu-item-dialog .megamenu_outer_wrap .mega_menu .mega-widget-title-action {
		direction: ltr;
	}
	.megamenu-admin-modal {
		left: 0;
		right: 160px;
	}
}

body.folded.maxmegamenu-admin:not(.rtl) .megamenu-admin-modal {
	left: 36px;
	right: 0;
}

body.rtl.folded.maxmegamenu-admin .megamenu-admin-modal {
	left: 0;
	right: 36px;
}

@media screen and (max-width: 782px) {
	body.maxmegamenu-admin .megamenu-admin-modal {
		left: 0 !important;
		right: 0 !important;
	}
}

body.rtl.maxmegamenu-admin .megamenu-admin-modal {
	left: 0;
	right: 160px;
}

body.desktop-mode-chromeless.maxmegamenu-admin .megamenu-admin-modal {
	left: 0;
	right: 0;
	top: 0;
}

.desktop-mode-chromeless .megamenu_outer_wrap:not(.megamenu-admin-modal *) .megamenu-dialog-tablist {
	display: none;
}

body.desktop-mode-chromeless.maxmegamenu-admin .megamenu_wrap.megamenu-dialog-rail:not(.megamenu-admin-modal *) {
	grid-template-columns: 1fr;
}

body.desktop-mode-chromeless.maxmegamenu-admin .megamenu_wrap.megamenu-dialog-rail:not(.megamenu-admin-modal *) > .mega-tablist {
	display: none;
}

body.desktop-mode-chromeless.maxmegamenu-admin .megamenu_wrap.megamenu-dialog-rail:not(.megamenu-admin-modal *) > .megamenu-dialog-panels {
	grid-column: 1;
}

body.maxmegamenu-admin .wp-media-buttons {
	.button {
		margin: 0;
		padding: 0 8px;
	}

	.button:has(.dashicons) {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	.button span.dashicons {
		display: flex;
		align-items: center;
		font-size: 16px;
	}
}

// Icon-only admin buttons (e.g. Pro media selector): tighter horizontal padding than `.button-compact`.
body.maxmegamenu-admin .button.button-compact.button-icon-only {
	padding: 0 6px;
}

// Saved-state dashicon alignment inside compact buttons.
body.maxmegamenu-admin .button.button-compact:has(.dashicons) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

body.maxmegamenu-admin .button.button-compact .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
}

// Core accordion / postbox overflow would clip ::before/::after tooltips on the Menus screen.
body.maxmegamenu-admin #mega_menu_meta_box,
body.maxmegamenu-admin #mega_menu_meta_box-content,
body.maxmegamenu-admin #mega_menu_meta_box-content > :first-child,
body.maxmegamenu-admin #mega_menu_meta_box .accordion-section-content {
	overflow: visible !important;
}

// Menu Locations tab: lead copy under page title (core `.description` typography).
body.maxmegamenu-admin .menu_settings.menu_settings_menu_locations > p.description {
	margin: 20px 0;
}

// Menu Locations page: `h3.first` underline (global `h3` rule uses `border-bottom`; match card chrome to `--medium-gray`).
body.maxmegamenu-admin .menu_settings.menu_settings_menu_locations > h3.first {
	border-bottom-color: var(--medium-gray);
}

// `.megamenu-location-toolbar-btn`: Settings/Preview on location cards + modal header (see mixin).
body.maxmegamenu-admin .megamenu-location-toolbar-btn.button.button-compact {
	@include megamenu-location-toolbar-button-layout;
}

body.maxmegamenu-admin .megamenu-admin-modal__header-top .megamenu-location-toolbar-btn.button.button-compact:not(.button-secondary) {
	border: 0;
	box-shadow: none;
}

// Modal secondary controls: inactive tab/segment styling and other non-ghost secondaries.
// Ghost icon controls use `megamenu-admin-modal-ghost-icon-btn` (next block).
body.maxmegamenu-admin .megamenu-admin-modal button.button-secondary {
	@include megamenu-admin-modal-button-secondary;

	&.is-active {
		border-width: 2px;
	}

	&:focus {
		box-shadow: none;
	}
}

// Ghost icon buttons: high-specificity chain wins over core `.button-secondary` without `!important`.
body.maxmegamenu-admin
	.megamenu-admin-modal
	button.button.button-secondary.megamenu-admin-modal-icon-btn.button-compact,
body.maxmegamenu-admin
	.megamenu-admin-modal
	button.button.button-secondary.megamenu-location-settings-dialog-edit-theme {
	@include megamenu-admin-modal-ghost-icon-btn;
}

// Block editor: `.is-pressed` on document tools uses near-black; MMM uses `__expand-btn--expanded` with `var(--black)`.
body.maxmegamenu-admin
	.megamenu-admin-modal
	button.button.button-secondary.megamenu-admin-modal-icon-btn.megamenu-admin-modal__expand-btn.megamenu-admin-modal__expand-btn--expanded {
	background: var(--black);
	color: #fff;

	&:hover:not(:disabled) {
		color: #fff;
		background: var(--black);
	}

	&:active:not(:disabled) {
		color: #fff;
		background: var(--semidark-gray);

		@supports (background: color-mix(in srgb, var(--black) 90%, #fff)) {
			background: color-mix(in srgb, var(--black) 90%, #fff);
		}
	}
}

// Min card height: Max Mega Menu settings pages only (not Appearance > Menus).
body.maxmegamenu-admin:not(.nav-menus-php) .menu_settings.menu_settings_menu_locations.mega-location-cards-root .mega-location-cards > .mega-location.postbox {
	min-height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

// Location cards (Menu Locations + Max Mega Menu meta box on nav-menus.php): one root, optional `--meta` for narrow column.
body.maxmegamenu-admin .menu_settings.menu_settings_menu_locations.mega-location-cards-root {
	.mega-location-cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		width: 100%;

		body.maxmegamenu-admin.nav-menus-php & {
			gap: 20px;
		}

		&:empty {
			display: none;
		}

		@media screen and (max-width: 782px) {
			grid-template-columns: minmax(0, 1fr);
		}

		@media screen and (min-width: 1800px) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	// Dashed “add location” slot (same layout as `.mega-col-add-widget`, without text `color` rules — inherits UA/link styling).
	a.mega-location-add-card {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 100px;
		padding: 6px 8px;
		border: 1px dashed var(--wp-admin-theme-color);
		border-radius: 4px;
		background: white;
		cursor: pointer;
		transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
		gap: 6px;
		text-decoration: none;
		vertical-align: middle;
		font-size: 13px;
		font-weight: 500;

		.dashicons {
			font-size: 18px;
			width: 18px;
			height: 18px;
			line-height: 1;
			opacity: 0.45;
			transition: opacity 0.2s ease;
		}

		&:hover,
		&:focus-visible {
			border-style: solid;
			border-color: $focus-ring-blue-strong;
			background: white;
			box-shadow: $shadow-small-hover;

			.dashicons {
				opacity: 1;
			}
		}

		&:focus-visible {
			@include mega-admin-focus-ring;
		}
	}

	.mega-location.postbox {
		margin: 0;
		min-width: 0;
		border: 1px solid var(--medium-gray);
		border-radius: 4px;
		box-shadow: $shadow-small;
		background: white;
		font-size: 14px;
		cursor: pointer;

		&:hover {
			box-shadow: $shadow-small-hover;
		}

		&.mega-location--new-highlight {
			animation: mm-mega-widget-selector-pulse 0.85s ease-in-out infinite;

			@media (prefers-reduced-motion: reduce) {
				animation-iteration-count: 2;
			}
		}

		> .mega-inside {
			margin: 0;
			padding: 20px;
			box-sizing: border-box;

			body.maxmegamenu-admin.nav-menus-php & {
				padding: 16px;
			}
		}

		.mega-location__header {
			padding: 0;
			border: 0;
		}

		.mega-location__header-row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		.mega-location__title {
			display: flex;
			align-items: center;
			gap: 8px;
			margin: 0;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.35;
			color: var(--black);
			flex: 1 1 auto;
			min-width: 0;

			body.maxmegamenu-admin.nav-menus-php & {
				font-size: 14px;
			}
		}

		.mega-location__title-icon {
			flex-shrink: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			font-size: 20px;
			line-height: 1;
		}

		.mega-location__title--editable .mega-location__title-cluster {
			display: flex;
			align-items: center;
			gap: 4px;
			min-width: 0;
			flex: 0 0 auto;
			cursor: pointer;
		}

		.mega-location__title--editable .mega-location__title-display {
			min-width: 0;
			flex: 0 1 auto;
		}

		.mega-location__title--editable .mega-location__title-text {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-decoration: underline solid var(--medium-gray) 1px;
			text-underline-offset: 3px;
			text-decoration-skip-ink: auto;
		}

		/* Our `display: block` above beats UA `[hidden]` — restore hiding when editing. */
		.mega-location__title--editable .mega-location__title-text[hidden] {
			display: none;
		}

		.mega-location__title-edit {
			box-sizing: border-box;
			flex-shrink: 0;
			width: 20px;
			min-width: 20px;
			height: 20px;
			min-height: 0;
			margin: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			color: var(--gray);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			vertical-align: middle;
			cursor: pointer;
			opacity: 0;
			transition: opacity 0.15s ease;

			@include megamenu-admin-icon-dashicon-child(16px);

			&:hover,
			&:focus,
			&:active {
				border: 0;
				background: transparent;
				box-shadow: none;
				color: var(--black);
			}

			&:focus-visible {
				@include mega-admin-focus-ring;
			}
		}

		.mega-location__title--editable .mega-location__title-cluster:hover .mega-location__title-edit,
		.mega-location__title--editable .mega-location__title-cluster:focus-within .mega-location__title-edit {
			opacity: 1;
		}

		.mega-location__title-cluster:has(.mega-location__title-edit-field:not([hidden])) .mega-location__title-edit {
			display: none;
		}

		.mega-location-card-title-input {
			box-sizing: border-box;
			width: fit-content;
			min-width: 3ch;
			max-width: 100%;
			margin: 0;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.35;
			-webkit-field-sizing: content;
			field-sizing: content;
		}

		.mega-location__header-actions {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			flex-shrink: 0;
		}

		&[data-mega-location^="max_mega_menu_"] .mega-location__delete {
			display: none;
		}

		&[data-mega-location^="max_mega_menu_"].mega-location-mmm-off .mega-location__delete {
			display: inline-flex;
		}

		button.mega-location-delete-link {
			display: inline-flex;
			align-items: center;
			margin: 0;
			padding: 0 10px;
			border: 0;
			border-radius: 4px;
			background: transparent;
			color: $error-link;
			font: inherit;
			line-height: inherit;
			text-align: inherit;
			text-decoration: none;
			cursor: pointer;
			box-shadow: none;

			&:hover,
			&:focus {
				color: $error-link-hover;
			}

			&[aria-disabled="true"] {
				cursor: not-allowed;
				opacity: 0.6;
			}

			.dashicons {
				margin-right: 4px;
				font-size: 18px;
				width: 18px;
				height: 18px;
			}
		}

		.mega-location__meta {
			display: flex;
			flex-direction: column;
			gap: 8px;
			padding: 10px 0 0 0;
			font-size: 13px;
			line-height: 1.5;
			color: var(--gray);

			body.maxmegamenu-admin.nav-menus-php & {
				display: none;
			}
		}

		.mega-location__meta p {
			margin: 0;
		}

		.mega-location__assigned-link {
			color: var(--wp-admin-theme-color);
			font-weight: 400;
			text-decoration: none;

			&:hover,
			&:focus {
				color: var(--wp-admin-theme-color-darker-20);
			}
		}
	}

	// Menu location cards only: `@wordpress/components` toggle uses `--wp-components-color-accent` (WP admin theme blue).
	.mega-mmm-enable-toggle {
		--wp-components-color-primary: var(--wp-admin-theme-color);
		--wp-components-color-accent: var(--wp-admin-theme-color);
	}

	&.mega-location-cards-root--meta {
		.mega-location-cards {
			grid-template-columns: minmax(0, 1fr);
			align-items: start;
		}

		.mega-location.postbox {
			.mega-location__header-row {
				flex-wrap: nowrap;
			}
		}

		.mega-location__assigned,
		.mega-location__delete,
		button.mega-location-delete-link {
			display: none !important;
		}

		.mega-location__meta:not(:has(.mega-location__description)) {
			display: none !important;
		}
	}
}

// Plugin admin screens: white #wpwrap main canvas (Appearance > Menus keeps core WP chrome).
body.maxmegamenu-admin:not(.nav-menus-php) #wpwrap {
	background-color: white;
}

// Lock document scroll while any mega admin dialog is open (menu item, location settings + preview, theme editor).
// `html` + `body`: dialog-menu-item-settings.js; `body` only: dialog-location-settings.js, theme-editor.js.
html.megamenu-dialog-open,
body.megamenu-dialog-open {
	overflow: hidden;
	overscroll-behavior: none;
}

body.megamenu-dialog-open #wpwrap {
	overflow: hidden;
}

body.maxmegamenu-admin.nav-menus-php {

	&.megamenu-dialog-open {
		ul#adminmenu a.wp-has-current-submenu:after,
		ul#adminmenu>li.current>a.current:after {
			border-right-color: var(--semidark-gray);
		}
	}

	// Appearance > Menus: map pin before the "Display location" legend (core `.menu-theme-locations` fieldset).
	.menu-theme-locations .menu-settings-group-name::before {
		display: inline-block;
		margin-inline-end: 5px;
		font-family: dashicons;
		font-size: 16px;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		vertical-align: -0.15em;
		speak: never;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\f230"; // dashicons-location
	}

	.megamenu-menu-item-dialog .megamenu_outer_wrap.megamenu-dialog-rail {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
		padding: 0;
		user-select: none;
		position: relative;

		.CodeMirror {
			user-select: auto;
		}

		// Custom HTML widget (core): constrain CodeMirror inside the menu-item widget form.
		.mega-widget .custom-html-widget-fields .CodeMirror {
			max-height: 150px;
			min-height: 150px;
			height: auto;
		}

		.mega-widget .custom-html-widget-fields .CodeMirror-scroll {
			max-height: 150px;
			min-height: 0;
		}

		.notice {
			margin: 10px 0 0 0;

			.notice-dismiss:focus {
				box-shadow: none;
			}
		}

		.megamenu_tabs {
			li.megamenu_tab_horizontal {
				cursor: pointer;
				font-size: 12px;
				font-weight: normal;
				padding: 3px 5px;
				margin: 0;
				color: var(--semidark-gray);
				border-radius: 3px;
				background: var(--feather-gray);
				border: 1px solid var(--light-gray);

				&.active,
				&:hover {
					background: var(--wp-admin-theme-color);
					border-color: var(--wp-admin-theme-color);
					color: white;
				}
			}

			&.horizontal {
				width: auto;
				max-width: 100%;
				margin-top: 0;
				margin-bottom: 0;
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				gap: 8px 15px;
			}
		}

		.megamenu_icon_tab_toolbar {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 12px 16px;
			width: 100%;
			margin-top: 10px;
			margin-bottom: 0;
			box-sizing: border-box;

			.megamenu_tabs.horizontal {
				flex: 1 1 auto;
				min-width: 0;
			}

			#filter_icons.filter_icons {
				flex: 0 0 auto;
				margin-left: auto;
				min-height: 28px;
			}

			// Custom Icon sub-tab has no dashicons/FA grid — hide search (rel matches menu-item-manager `megamenu_tab_{$id}`).
			&:has(li.megamenu_tab_horizontal.active[rel='megamenu_tab_custom']) {
				.filter_icons,
				#filter_icons.filter_icons {
					display: none;
				}
			}
		}

		.filter_icons {
			width: auto;
			min-width: 120px;
			max-width: 220px;
			font-size: 0.9em;
			box-sizing: border-box;
		}

		p.submit {
			margin: 0;
			padding-top: 16px;
			padding-bottom: 20px;
			position: sticky;
			bottom: 0;
			z-index: 1;
			background: white;
		}

		.megamenu-dialog-panels {
			padding: 0;
			width: auto;
			height: auto;
			align-self: stretch;
			position: relative;

			> .megamenu_content {
				padding: 20px 32px 0;
				box-sizing: border-box;
			}

			> .megamenu_content.menu_icon {
				padding-top: 0;
			}

			&:has(.mega-widget.open) {
				isolation: isolate;
				overflow: auto;
				overscroll-behavior: contain;
				height: 100%;
				max-height: 100%;
				min-height: 0;

				// Transparent click-capture layer: prevents accidental clicks on the grid behind the
				// open widget form. Visual dimming is handled by the box-shadow on `.mega-widget-inner`.
				&::before {
					content: "";
					position: absolute;
					inset: 0;
					z-index: 40;
					pointer-events: auto;
					background: transparent;
				}

				// Anchor `.mega-widget-inner` to this panels element (override grid + WP widget positioning contexts).
				// This ensures `position: absolute` on `.mega-widget-inner` resolves to the panels container.
				.megamenu_content.mega_menu #megamenu-grid .mega-row {
					position: static;
				}

				.megamenu_content.mega_menu #megamenu-grid .mega-row .mega-col {
					position: static;
				}

				.megamenu_content.mega_menu .mega-widget.open {
					position: static;
				}
			}
		}

		.megamenu_content.mega_menu {
			display: flex;
			flex-direction: column;
			gap: 16px;

			#megamenu-standard,
			#megamenu-grid {
				display: none;
			}

			// `mm_panel_options` matches megamenu-pro (columns + widget); visibility follows sub menu type.
			.mega-submenu-toolbar > .mm_panel_options {
				display: none;
			}

			&[data-type='grid'] {
				#megamenu-grid {
					display: block;
				}

				.mega-submenu-toolbar > .mm_panel_options {
					display: flex;
				}
			}

			&[data-type='megamenu'] {
				.mega-submenu-toolbar > .mm_panel_options {
					display: flex;
				}

				#megamenu-standard {
					display: flex;
				}

				.mega-submenu-toolbar > .mm_panel_options select#mm_number_of_columns {
					display: inline-block;
					width: auto;
					min-width: 120px;
					max-width: 200px;
				}
			}

			#megamenu-tabbed {
				display: none;
				margin-top: 20px;

				p {
					font-style: italic;
				}
			}

			&[data-type='tabbed'] #megamenu-tabbed {
				display: block;
			}

			&[data-type='tabbed'] .mega-submenu-toolbar > .mm_panel_options {
				display: none;
			}

			// Flyout: only the display-mode field stays in the top toolbar; hide columns + widget row.
			&[data-type='flyout'] .mega-submenu-toolbar > .mm_panel_options {
				display: none;
			}

			.mega-submenu-toolbar {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-end;
				column-gap: 16px;
				row-gap: 12px;
				width: 100%;
				margin-bottom: 20px;
				overflow: visible;

				> label[for='mm_enable_mega_menu'] {
					@include mega-toolbar-field-label;
					flex: 0 0 100%;
					width: 100%;
				}

				// Menu item modal: layout only — no `@include mega-toolbar-native-select` (theme editor only).
				> select#mm_enable_mega_menu {
					width: auto;
					min-width: 200px;
					max-width: min(360px, 100%);
				}

				> .mm_panel_options {
					flex-flow: row nowrap;
					align-items: flex-end;
					justify-content: flex-end;
					gap: 12px 16px;
					min-width: 0;
					margin-left: auto;
					flex: 1 1 auto;

					// Column count applies to Standard layout only (not Grid).
					select#mm_number_of_columns {
						display: none;
					}

					select#mm_widget_selector {
						min-width: 200px;
						max-width: 360px;
						width: auto;
						flex: 1 1 auto;
					}

					select#mm_widget_selector.mega-widget-selector-pulse {
						border-radius: 4px;
						animation: mm-mega-widget-selector-pulse 0.85s ease-in-out 2;

						@media (prefers-reduced-motion: reduce) {
							animation-iteration-count: 1;
						}
					}
				}
			}

			> #megamenu-standard,
			> #megamenu-grid {
				width: 100%;
			}

			#megamenu-grid {
				padding-bottom: 100px;

				> .drop-area.ui-sortable-placeholder {
					max-height: none !important;
					min-height: 0;
				}

				> .mega-row.ui-sortable-helper {
					min-height: 0;
					max-height: none;
				}

				&:not(.mega-grid--rows-sortable) .mega-row .mega-row-header {
					cursor: default;

					&:active {
						cursor: default;
					}
				}

				> .drop-area {
					margin-top: 20px;
					border: 1px dashed var(--light-gray);
					background: var(--feather-gray);
					max-height: 100px !important;
				}

				// Primary add buttons: icon aligned with label (overrides `.mega-row-header .dashicons` on Column).
				button.mega-add-row,
				button.mega-add-column {
					display: inline-flex;
					align-items: center;
					gap: 4px;

					.dashicons {
						color: white;
						line-height: 1;
						width: 16px;
						height: 16px;
						font-size: 16px;
						flex-shrink: 0;
						margin: 0;
					}
				}

				.mega-row {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: stretch;
					background-color: var(--feather-gray);
					border: 1px solid var(--light-gray);
					border-radius: 4px;
					box-shadow: $shadow-small;
					padding: 20px;
					margin-top: 20px;
					box-sizing: border-box;
					position: relative;

					&:first-child {
						margin-top: 0;
					}

					// `--row-tracks` / `--span` on `.mega-row` / `.mega-col`; `--mega-cols-gap-slots` = column count − 1 (JS)
					// for gap-aware widths. Flex + explicit width matches grid track fractions and allows width transitions.
					.mega-row-cols {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-items: flex-start;
						width: 100%;
						min-width: 0;
						gap: 8px;
						box-sizing: border-box;

						> .drop-area.ui-sortable-placeholder {
							flex-shrink: 0;
							max-height: none !important;
							min-height: 0;
						}

						> .mega-col {
							flex: 0 0 auto;
							width: calc(
								(100% - 8px * var(--mega-cols-gap-slots, 0)) * var(--span, 1) / var(--row-tracks, 12)
							);
							min-width: 0;
							box-sizing: border-box;
							transition: width 0.35s ease;

							@media (prefers-reduced-motion: reduce) {
								transition: none;
							}
						}
					}

					.mega-row-header {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						align-content: center;
						gap: 8px;
						width: 100%;
						padding: 0 0 20px 0;
						box-sizing: border-box;
						cursor: grab;
						user-select: none;

						a {
							cursor: pointer;
						}

						&:active {
							cursor: grabbing;
						}

						.mega-disabled .dashicons {
							opacity: 1;
						}

						.mega-row-actions .dashicons.mega-settings-open {
							opacity: 1;
							color: var(--black);
						}

						.mega-row-actions .dashicons {
							opacity: 1;
							color: var(--gray);
							transition: color 0.15s ease, background 0.15s ease;
						}

						.mega-row-actions {
							order: 1;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							align-items: center;
							gap: 10px;
							flex: 0 1 auto;

							.mega-row-header__action--delete {
								display: none;
								color: $error;
							}
						}

						// Row toolbar: settings/trash are icon `button.dashicons.mega-row-header__action`; desktop/mobile
						// use an inner `.dashicons` — use one box size so flex cross-axis alignment matches.
						.mega-row-header__action {
							appearance: none;
							-webkit-appearance: none;
							border: 0;
							background: transparent;
							padding: 0;
							margin: 0;
							cursor: pointer;
							box-shadow: none;
							color: inherit;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							flex-shrink: 0;
							line-height: 1;

							&:focus-visible {
								@include mega-admin-focus-ring;
							}

							&.dashicons {
								width: 16px;
								height: 16px;
								font-size: 16px;
							}

							.dashicons {
								width: 16px;
								height: 16px;
								font-size: 16px;
								line-height: 1;
								display: block;
							}

						}

						.mega-row-actions:hover .dashicons {
							color: var(--black);
						}

						.mega-row-settings {
							order: 3;
							flex: 1 1 100%;
							width: 100%;
						}

						button.mega-add-column {
							order: 2;
							margin-left: auto;
							cursor: pointer;
						}
					}

					&[data-used-cols='0'] {
						.mega-row-header .mega-row-actions .mega-row-header__action--delete {
							display: inline-flex;
							opacity: 1;
						}
					}

					.mega-too-many-cols {
						display: none;
					}

					&[data-too-many-cols='true'] {
						.mega-too-many-cols {
							display: block;
						}
					}

					.mega-row-is-full {
						display: none;
					}

					.notice {
						margin: 10px 5px;
					    cursor: pointer;
					}
				}

				.mega-col {
					display: block;
					position: relative;
					min-width: 0;
					box-sizing: border-box;

					&.mega-col-add-target .mega-col-wrap {
						border-color: var(--wp-admin-theme-color);
						box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
					}

					.mega-col-wrap {
						background-color: white;
						border: 1px solid var(--light-gray);
						border-radius: 2px;
						box-shadow: $shadow-small;
						margin: 0;
						padding: 10px;
						transition: border-color 0.15s ease, box-shadow 0.15s ease;

						&:hover {
							box-shadow: $shadow-small-hover;
						}
					}

					.mega-col-widgets {
						display: flex;
						flex-direction: column;
						align-items: stretch;
						gap: 10px;
						min-height: 50px;

						.mega-col-add-widget {
							@include mega-col-add-widget-appearance;
							margin-top: auto;
							border-color: var(--light-gray);
							background: white;
							color: var(--black);

							.dashicons {
								opacity: 0.85;
								color: var(--gray);
							}

							&:hover,
							&:focus-visible {
								color: var(--wp-admin-theme-color);
								border-color: var(--wp-admin-theme-color);
								background: white;

								.dashicons {
									opacity: 1;
									color: var(--wp-admin-theme-color);
								}
							}
						}

						.mega-widget {
							float: none;
							width: 100%;
							border: 0;
							margin: 0;

							&.mega-widget-added-pulse .mega-widget-top {
								animation: mm-mega-widget-selector-pulse 0.85s ease-in-out infinite;

								@media (prefers-reduced-motion: reduce) {
									animation-iteration-count: 2;
								}
							}

							.mega-widget-top {
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-items: center;
								gap: 8px;
								min-height: 42px;
								box-sizing: border-box;
								padding: 4px 10px;
								background: white;
								border: 1px solid var(--light-gray);
								border-radius: 2px;
								box-shadow: $shadow-small;
								overflow: hidden;
								transition:
									border-color 0.15s ease,
									box-shadow 0.15s ease;
							}

							&:hover .mega-widget-top {
								border: 1px solid var(--semidark-gray);
								box-shadow: $shadow-small-hover;
							}

							&.open .mega-widget-top {
								border: 1px solid var(--semidark-gray);
							}

							&.open .mega-widget-inner {
								border: 1px solid var(--semidark-gray);
							}

							.mega-widget-title {
								flex: 1 1 auto;
								min-width: 0;
								margin: 0;

								h4 {
									font-weight: normal;
									margin: 0;
									line-height: 1.35;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.mega-widget-desc {
									font-weight: normal;
									font-size: 11px;
									color: var(--gray);
									font-style: italic;
								}
							}

							.mega-widget-title-action {
								flex: 0 0 auto;
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-items: center;
								justify-content: flex-end;
								gap: 8px;
								position: static;
								margin: 0;
								padding: 0;
								background: white;
								border: 0;
							}

							&[data-type=item] form {
								display: flex;
								flex-direction: column;
								align-items: stretch;
								gap: 6px;

								input, select {
									align-self: flex-end;
									max-width: 100%;
								}

								p {
									width: 100%;
									margin-bottom: 0;
								}

								.mega-widget-content {
									padding-top: 10px;
								}
							}

						}

					}

					.mega-col-header {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						align-content: center;
						justify-content: flex-start;
						width: 100%;
						min-height: 40px;
						height: auto;
						box-sizing: border-box;
						gap: 8px;
						row-gap: 6px;
						min-width: 0;
						margin-bottom: 10px;

						> .mega-col-actions {
							display: inline-flex;
							flex-wrap: wrap;
							align-items: center;
							align-content: center;
							gap: 5px;
							row-gap: 6px;
							flex: 1 1 auto;
							min-width: 0;
							max-width: 100%;
							user-select: none;

							> :not(.mega-col-drag-handle) {
								flex-shrink: 0;
							}

							.mega-col-header__action {
								appearance: none;
								-webkit-appearance: none;
								border: 0;
								background: transparent;
								padding: 0;
								margin: 0;
								cursor: pointer;
								box-shadow: none;
								color: inherit;
								display: inline-flex;
								align-items: center;
								justify-content: center;
								line-height: 1;

								&:focus-visible {
									@include mega-admin-focus-ring;
								}
							}

							> .mega-col-drag-handle {
								flex: 1 1 auto;
								align-self: stretch;
								min-width: 24px;
								margin: 0;
								padding: 0;
								border: 0;
								background: transparent;
								cursor: grab;
								border-radius: 2px;

								&:active {
									cursor: grabbing;
								}
							}

							.mega-disabled .dashicons {
								opacity: 1;
							}

							.dashicons.mega-settings-open {
								opacity: 1;
								color: var(--black);
							}

							.dashicons {
								opacity: 1;
								color: var(--gray);
								transition: color 0.15s ease;
								width: 14px;
								height: 14px;
								font-size: 14px;
								line-height: 1;
								display: inline-flex;
								align-items: center;
								justify-content: center;
							}

							.mega-col-header__action--delete {
								display: none;
								color: $error;
							}

							&:hover .dashicons {
								color: var(--black);
							}
						}

						> .mega-col-span {
							@include mega-col-span-pill;

							button.mega-col-contract,
							button.mega-col-expand {
								appearance: none;
								-webkit-appearance: none;
								display: inline-flex;
								align-items: center;
								justify-content: center;
								margin: 0;
								padding: 0;
								border: 0;
								background: transparent;
								font: inherit;
								color: inherit;
								line-height: 1;
								border-radius: 2px;
								cursor: pointer;
								box-shadow: none;

								&:hover,
								&:focus-visible {
									color: var(--wp-admin-theme-color-darker-20);
								}

								&:focus-visible {
									@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
								}
							}

							button.mega-col-expand:disabled,
							button.mega-col-contract:disabled {
								color: var(--medium-gray);
								cursor: not-allowed;

								&:hover,
								&:focus-visible {
									color: var(--medium-gray);
								}

								.dashicons {
									cursor: not-allowed;
								}
							}

							.dashicons {
								margin-right: 0;
								width: 14px;
								height: 14px;
								font-size: 14px;
								line-height: 1;
								cursor: pointer;
								color: inherit;
								opacity: 1;
							}

							.mega-col-cols {
								display: inline-flex;
								align-items: center;
								line-height: 1.2;
								font-size: 11px;
								font-weight: 600;
								color: inherit;
							}
						}
					}

					// After `.mega-col-header__action--delete { display: none }` so higher specificity wins.
					&[data-total-blocks='0'] .mega-col-header > .mega-col-actions > .mega-col-header__action--delete {
						display: inline-flex;
						opacity: 1;
					}

				}

				button.mega-add-row {
					margin-top: 20px;
				}

				.mega-col-settings,
				.mega-row-settings {
					width: 100%;
					display: none;
					margin: 8px 0 20px;
					padding: 12px 14px;
					box-sizing: border-box;
					background: white;
					border: 1px solid var(--light-gray);
					border-radius: 2px;
					box-shadow: none;
				}

				.mega-col-settings {
					label {
						width: 100%;
						font-size: 11px;
						text-transform: uppercase;
						margin-right: 5px;
						color: var(--black);
						font-weight: 600;
						letter-spacing: 0.02em;
					}

					input {
						font-size: 13px;
						max-width: 100%;
						display: block;
						width: 100%;
						margin: 5px 0 10px 0;
						color: var(--black);
						border-color: var(--megamenu-form-control-border, var(--gray));
					}
				}

				.mega-row-settings {
					.mega-settings-row {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						gap: 8px 12px;
						margin-bottom: 8px;
					}

					label {
						width: 150px;
						font-size: 11px;
						text-transform: uppercase;
						display: inline-block;
						color: var(--black);
						font-weight: 600;
						letter-spacing: 0.02em;
					}

					input,
					select {
						font-size: 13px;
						color: var(--black);
						border-color: var(--megamenu-form-control-border, var(--gray));
					}
				}
				.mega-row-header .dashicons,
				.mega-col-header .dashicons {
					font-size: 13px;
					width: 15px;
					cursor: pointer;
				}

				.mega-col-header {
					user-select: none;

					a {
						cursor: pointer;
					}
				}

				.mega-disabled .dashicons {
					&:before {
						color: $error;
					}
				}

				.drop-area {
					display: inline-block;
					box-sizing: border-box;
				}

				.ui-sortable-helper {
					opacity: 0.5;
				}

			}

			#megamenu-standard {
				flex-flow: row wrap;
				align-items: flex-start;
				align-content: flex-start;
				gap: 0;
				background: var(--feather-gray);
				border: 1px solid var(--light-gray);
				padding: 5px;
				width: 100%;
				box-sizing: border-box;
				min-height: 200px;

				.no_widgets {
					font-size: 0.9em;
					margin-left: 10px;
					font-style: italic;
					margin-top: 10px;
					color: var(--semidark-gray);
					flex: 1 0 100%;
				}

				.drop-area {
					display: block;
					border: 1px solid var(--feather-gray);
					box-sizing: border-box;
				}

				.mega-widget {
					width: 100%;

					h4 {
						max-width: 700px;
					}
				}
			}

			.mega-widget {
				box-sizing: border-box;
				width: 160px;
				margin: 0;
				color: var(--semidark-gray);
				font-size: 12px;
				display: block;
				border: 5px solid transparent;
				flex: 0 0 auto;

				&:hover {
					.mega-widget-top {
						border: 1px solid var(--semidark-gray);
					}
					.mega-widget-inner {
						border: 1px solid var(--semidark-gray);
					}
				}

				textarea {
					max-height: 100px;
				}
			}

			.mega-widget.open {
				.mega-widget-top {
					border: 1px solid var(--semidark-gray);
					cursor: move;
					position: relative;
					z-index: 50;
					box-sizing: border-box;
					opacity: 0.5;
					filter: brightness(0.88);
					transition: opacity 0.15s ease, filter 0.15s ease;
				}

				.mega-widget-inner {
					border: 1px solid var(--semidark-gray);
					// Absolute within the panels container (rows, cols, and the open widget are all
					// position: static so `.megamenu-dialog-panels` is the nearest positioned ancestor).
					// JS sets --mmm-panels-scroll to the panels' scrollTop when the widget opens, so
					// `top: calc(var(…) + 50%)` places the form at the centre of the *visible* panels
					// area regardless of how far the user has scrolled.
					position: absolute;
					left: 10%;
					right: 10%;
					top: calc(var(--mmm-panels-scroll, 0px) + 50%);
					bottom: auto;
					transform: translateY(-50%);
					width: auto;
					margin: 0;
					z-index: 60;
					box-sizing: border-box;
					max-width: 100%;
					// Cap height to 90% of the panels visible height so the form never overflows.
					max-height: 90%;
					height: max-content;
					min-width: 0;
					min-height: 0;
					overflow-x: hidden;
					overflow-y: auto;
					overscroll-behavior: contain;
					display: flex;
					flex-direction: column;
					background: white;
					box-shadow:
						$shadow-large-hover,
						0 0 0 1px $shadow-a07,
						0 0 0 9999px rgba(0, 0, 0, 0.4);
					border-radius: 4px;

					&.mmm-widget-inner--preparing {
						opacity: 0;
						pointer-events: none;
						transition: none;
					}

					&.mmm-widget-inner--show {
						opacity: 1;
						transition: opacity 0.2s ease;
					}
				}

				.mega-widget-inner > form {
					display: flex;
					flex-direction: column;
					flex: 1 1 auto;
					min-height: 0;
					padding: 0 15px 0;
					margin-bottom: 0;
					box-sizing: border-box;
				}

				.mega-widget-inner .mega-widget-dialog-header {
					flex: 0 0 auto;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					gap: 8px;
					padding: 8px 0 10px;
					margin: 0;
					border-bottom: 1px solid var(--light-gray);
				}

				.mega-widget-inner .mega-widget-dialog-title {
					flex: 1 1 auto;
					min-width: 0;
					margin: 0;
					padding: 0 4px 0 2px;
					font-size: 14px;
					font-weight: 600;
					line-height: 1.35;
					color: var(--black);
					border-bottom: 0;
				}

				.mega-widget-inner .mega-widget-dialog-close {
					flex: 0 0 auto;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 32px;
					height: 32px;
					margin: 0;
					padding: 0;
					border: 0;
					border-radius: 4px;
					background: transparent;
					color: var(--gray);
					cursor: pointer;
					box-sizing: border-box;

					.dashicons {
						width: 18px;
						height: 18px;
						font-size: 18px;
						line-height: 1;
					}

					&:hover,
					&:focus-visible {
						color: var(--black);
						background: var(--feather-gray);
					}

					&:focus-visible {
						@include mega-admin-focus-ring;
					}
				}

				.mega-widget-inner .mega-widget-content {
					flex: 1 1 auto;
					min-height: 0;
					overflow-x: hidden;
					// Single scrollbar on `.mega-widget-inner` (viewport-capped).
					overflow-y: visible;
				}

				.mega-widget-inner .mega-widget-form-footer {
					flex: 0 0 auto;
					margin-top: 0;
					padding-top: 10px;
					padding-bottom: 12px;
					border-top: 1px solid var(--light-gray);
					background: white;
				}

				.mega-widget-action {
					&::after {
						content: '\f142';
					}
				}
			}

			.mega-widget-top {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				gap: 8px;
				min-height: 42px;
				box-sizing: border-box;
				border: 0;
				box-shadow: none;
				border: 1px solid var(--light-gray);
				padding: 0 10px;
				background: white;
				overflow: hidden;
			}



			.mega-widget[data-type='menu_item'] {
				.mega-widget-top {
					cursor: default;
				}
			}

			.mega-widget-title {
				flex: 1 1 auto;
				min-width: 0;

				h4 {
					color: var(--semidark-gray);
					margin: 0;
					padding: 0;
					overflow: hidden;
					white-space: nowrap;
					border-bottom: 0;
					font-size: 12px;
					text-overflow: ellipsis;
					line-height: 1.35;

					&:after {
						color: #d54e21;
						display: none;
						font: normal 20px/1 'dashicons';
						speak: none;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						margin-left: 5px;
						content: '\f463';
						animation: mm-rotation 2s infinite linear;
						vertical-align: middle;
					}
				}

				h4.loading {
					&:after {
						display: inline-block;
					}
				}
			}

			.mega-widget[data-type='menu_item'] {
				.mega-widget-title {
					h4 {
						&:before {
							color: var(--semidark-gray);
							font: normal 16px/1 'dashicons';
							speak: none;
							-webkit-font-smoothing: antialiased;
							-moz-osx-font-smoothing: grayscale;
							margin-right: 2px;
							content: "\f333";
							vertical-align: middle;
							top: -1px;
							position: relative;
						}
					}
				}
				form {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					gap: 6px;

					input, select {
						align-self: flex-end;
						max-width: 100%;
					}

					p {
						width: 100%;
						margin-bottom: 0;
					}
				}
			}

			.mega-widget-form-footer {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				width: 100%;
				box-sizing: border-box;
				margin-top: 12px;
				padding-top: 4px;
				clear: both;

				.mega-widget-controls {
					display: flex;
					align-items: center;
					flex: 0 0 auto;
					margin: 0;
					padding: 0;
				}
			}

			.mega-widget-controls {
				flex: 0 0 auto;

				.mega-delete {
					@include mega-admin-trash-icon-button;
				}
			}

			.mega-widget-inner {
				display: none;
				width: 100%;
				background: white;

				form {
					padding: 0 15px 15px 15px;
					margin-bottom: 0;
				}
				p {
					font-size: 12px;
				}
				select {
					font-size: 12px;
				}
				input {
					font-size: 12px;
				}
			}

			.mega-widget-title-action {
				flex: 0 0 auto;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
				gap: 8px;
				padding: 0;
				margin: 0;
				position: static;
				font-weight: normal;
				opacity: 1;
				background: white;

				.mega-col-span {
					@include mega-col-span-pill;

					.mega-widget-option.mega-widget-contract,
					.mega-widget-option.mega-widget-expand {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						line-height: 1;
						border-radius: 2px;
						color: inherit;

						&:hover,
						&:focus-visible {
							color: var(--wp-admin-theme-color-darker-20);
						}

						&::after {
							color: inherit;
						}

						&:focus-visible {
							@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
						}
					}

					.mega-widget-cols {
						display: inline-flex;
						align-items: center;
						line-height: 1.2;
						font-size: 11px;
						font-weight: 600;
						color: inherit;
					}
				}
			}

			.mega-widget-option {
				right: 0;
				appearance: none;
				-webkit-appearance: none;
				border: 0;
				background: 0 0;
				font: 400 16px/1 dashicons;
				speak: none;
				display: block;
				padding: 0;
				margin: 0;
				text-indent: 0;
				text-align: center;
				position: relative;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				text-decoration: none !important;
				color: var(--gray);
				box-shadow: none;

				&:hover {
					color: var(--semidark-gray);
					cursor: pointer;
				}

				&::after {
					padding: 0;
					font: 400 16px/1 dashicons;
					display: block;
				}
			}

			.mega-widget-cols {
				display: inline-flex;
				align-items: center;
				line-height: 1.2;
				color: var(--gray);
				font-size: 11px;
			}

			h5 {
				margin: 10px 0 0 10px;
				text-transform: uppercase;
			}

			.mega-widget-expand {
				&::after {
					content: '\f345';
				}
			}

			.mega-widget-contract {
				&::after {
					content: '\f341';
				}
			}

			.mega-widget-action {
				&::after {
					content: '\f107';
					margin: 0;
				}
			}

			.mega-widget-option.disabled {
				&:hover {
					color: var(--gray);
				}
			}

			.mega-widget[data-columns='1'] {
				.mega-widget-contract {
					display: none;
				}
			}

			#megamenu-standard {
				@include grid-col-widths('data-columns', '.mega-widget', 'data-columns');

				.mega-widget {
					transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);

					@media (prefers-reduced-motion: reduce) {
						transition: none;
					}
				}
			}

		}

		.menu_icon {
			.menu_icon__header {
				position: sticky;
				top: 0;
				z-index: 2;
				background: #fff;
				padding-top: 20px;
				padding-bottom: 20px;

				> h4 {
					margin-top: 0;
				}
			}

			.icon_selector {
				display: flex;
				flex-flow: row wrap;
				align-items: flex-start;
				gap: 10px;

				>div {
					flex: 0 0 auto;
					padding: 0;
					width: 40px;
					height: 40px;
					box-sizing: border-box;
					position: relative;
				}

				> div.mmm-icon-filter-hidden {
					display: none !important;
				}

				label {
					display: block;
					width: 40px;
					height: 40px;
					position: relative;
					z-index: 0;
					cursor: pointer;
					user-select: none;

					&:before {
						content: var(--mmm-i);
						speak: none;
						@include megamenu-admin-icon-pseudo-dashicon-tile;
					}
				}

				input.radio {
					position: absolute;
					inset: 0;
					width: 40px;
					height: 40px;
					margin: 0;
					padding: 0;
					box-sizing: border-box;
					opacity: 0;
					cursor: pointer;
					z-index: 1;

					&:checked {
						~ {
							label {
								color: var(--gray);
							}
						}
					}
				}

				> div:has(input:focus-visible) label:before {
					@include mega-admin-focus-ring;
				}

				> div:has(input:checked) label:before {
					color: var(--wp-admin-theme-color);
					background: transparent;
					box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
				}

				> div:has(input:checked):hover label:before {
					color: var(--wp-admin-theme-color);
					background: var(--light-gray);
					box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
				}

				> div:has(input:not(:checked)):hover label:before {
					color: var(--black);
					background: var(--light-gray);
				}

				.dash {
					label {
						&:before {
							font-style: normal;
							font-variant: normal;
							text-decoration: inherit;
							text-rendering: auto;
							font-family: dashicons;
						}
					}
				}

				.material {
					label {
						&:before {
							font-family: var(--wp--preset--font-family--material-symbols);
							font-style: normal;
							font-weight: 400;
							-webkit-font-smoothing: antialiased;
						}
					}
				}

				div.disabled label:before {
					content: "";
				}
			}

			// Max Mega Menu Pro: FA / Genericons tiles use `label[rel]` for the glyph (HTML entity), not `--mmm-i`.
			.megamenu_tab_fontawesome,
			.megamenu_tab_fontawesome5,
			.megamenu_tab_fontawesome6,
			.megamenu_tab_genericons {
				.icon_selector label[rel]:before {
					content: attr(rel);
					speak: none;
					@include megamenu-admin-icon-pseudo-dashicon-tile(40px, 24px);
				}
			}

			.megamenu_tab_fontawesome .icon_selector .fa label[rel]:before {
				font-family: FontAwesome;
			}

			.megamenu_tab_fontawesome5 .icon_selector {
				.fas label[rel]:before,
				.far label[rel]:before {
					font-family: 'Font Awesome 5 Free';
				}

				.far label[rel]:before {
					font-weight: 400;
				}

				.fas label[rel]:before {
					font-weight: 900;
				}

				.fab label[rel]:before {
					font-family: 'Font Awesome 5 Brands';
					font-weight: 400;
				}

				.fal label[rel]:before {
					font-family: 'Font Awesome 5 Free';
					font-weight: 300;
				}

				.fas.pro label[rel]:before,
				.far.pro label[rel]:before,
				.fal.pro label[rel]:before {
					font-family: 'Font Awesome 5 Pro';
				}
			}

			.megamenu_tab_fontawesome6 .icon_selector {
				.fab label[rel]:before {
					font: var(--fa-font-brands);
					font-size: 24px;
				}

				.far label[rel]:before {
					font: var(--fa-font-regular);
					font-size: 24px;
				}

				.fas label[rel]:before {
					font: var(--fa-font-solid);
					font-size: 24px;
				}
			}

			.megamenu_tab_genericons .icon_selector .genericon label[rel]:before {
				font-family: Genericons;
			}

			.mega-material-notice {
				margin: 12px 0;
				padding: 10px 12px;
				background: var(--feather-gray);
				border-left: 4px solid var(--wp-admin-theme-color, #3858e9);
				font-size: 13px;

				strong {
					font-weight: 600;
				}
			}
		}

		@at-root body.maxmegamenu-admin.nav-menus-php .megamenu-menu-item-dialog .general_settings table {
			td {
				padding-top: 3px;
				padding-bottom: 3px;
			}

			td.mega-value--pill {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;
				gap: 10px 12px;

				.components-form-toggle {
					flex-shrink: 0;
				}

				.mega-description,
				em {
					flex: 0 1 auto;
					min-width: 0;
					max-width: 100%;
					margin: 0;
					text-align: inherit;
				}

				.mega-description {
					display: block;
				}
			}
		}

		form,
		.megamenu_content {
			> h4.first {
				margin: 0 0 0.85em 0;
			}
			> h4 {
				display: flow-root;
				border-bottom: 1px solid var(--light-gray);
				padding: 0 0 12px 0;
				font-weight: 600;
				color: var(--black);
				margin: 1.5em 0 1em 0;
			}
		}

		select {
			border-radius: 4px;
			border-color: var(--megamenu-form-control-border, var(--gray));
			background-color: white;
		}

		.description,
		.mega-description {
			color: var(--gray);
			font-style: italic;
		}

		img {
			height: auto;
			max-width: 100%;
		}
	}

	&.megamenu_enabled {
		.megamenu_prefix {
			display: block;
			font-size: 0.9em;
			border-left: 3px solid $warning;
			padding-left: 10px;
			margin-top: 3px;
		}
	}

	.megamenu_prefix {
		display: none;
	}

	// Uses core .button.button-primary.button-small; only layout, reveal, dashicon, and non-disabled attr state.
	.megamenu_launch.button.button-primary.button-small {
		margin-left: 8px;
		display: inline-flex;
		align-items: center;
		gap: 3px;
		line-height: 1.15;
		min-height: 22px;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
		transition: opacity 0.2s ease;
		z-index: 1;
		position: relative;

		&:focus-visible {
			opacity: 1;
		}

		&.megamenu_disabled,
		&[aria-disabled="true"] {
			cursor: not-allowed;
			color: var(--gray) !important;
			background: var(--feather-gray) !important;
			border-color: var(--light-gray) !important;
			box-shadow: none !important;
		}

		&.megamenu_disabled:hover,
		&.megamenu_disabled:active,
		&[aria-disabled="true"]:hover,
		&[aria-disabled="true"]:active {
			color: var(--gray) !important;
			background: var(--feather-gray) !important;
			border-color: var(--light-gray) !important;
			box-shadow: none !important;
		}

		&:before {
			font-family: dashicons;
			content: "\f111"; // dashicons-admin-generic
			font-size: 12px;
			width: 12px;
			height: 12px;
			line-height: 12px;
			color: rgba(white, 0.92);
			display: inline-block;
			flex-shrink: 0;
		}

		&.megamenu_disabled:before,
		&[aria-disabled="true"]:before {
			color: var(--medium-gray);
		}
	}

	// Restore hidden state when the launch control has programmatic :focus (e.g. after modal close) but not :focus-visible.
	.menu-item-bar .menu-item-handle:not(:hover) .megamenu_launch.button.button-primary.button-small:focus:not(:focus-visible) {
		opacity: 0;
	}

	.menu-item-bar {
		.menu-item-handle {
			// Hover only: focus-within would keep the button visible when focus returns after closing the modal.
			&:hover {
				.megamenu_launch {
					opacity: 1;
				}
			}
		}
		.dashicons-admin-generic {
			&:before {
				font-size: 1.2em;
				margin-right: 1px;
				height: auto;
			}
		}
	}

	#nav-menu-meta .mega_menu_meta_box {
		// Core wraps the callback in a div (historically .inside); target first child without using that class name.
		#mega_menu_meta_box-content > :first-child {
			margin: 0;
			padding: 14px;
			box-sizing: border-box;
		}

		.accordion-section-content {
			padding: 0;
		}
	}

	.menu-item-handle {
		.item-title {
			margin-right: 0;
		}
	}
}

// Shared modal shell (menu item editor, preview, location settings): fixed overlay inset from the admin menu edge.
// Same `body` block continues below with theme editor / `#wpbody` layout (icon dropdown, Menu Themes tabs, etc.).
body.maxmegamenu-admin {

	--megamenu-form-control-border: var(--gray);
	--mmm-admin-bar-offset: 0;

	// @wordpress/components defaults (e.g. form toggles) prefer `--wp-components-color-accent` with a blue
	// fallback. Tie component accents to the active admin color scheme so location cards + dialogs match
	// Modern purple / user scheme instead of isolated Gutenberg blue.
	--wp-components-color-primary: var(--wp-admin-theme-color);
	--wp-components-color-accent: var(--wp-admin-theme-color);
	--wp-components-color-accent-darker-10: var(
		--wp-admin-theme-color-darker-10,
		var(--wp-admin-theme-color)
	);
	--wp-components-color-accent-darker-20: var(
		--wp-admin-theme-color-darker-20,
		var(--wp-admin-theme-color)
	);

	&.admin-bar {
		--mmm-admin-bar-offset: 32px;

		@media screen and (max-width: 782px) {
			--mmm-admin-bar-offset: 46px;
		}
	}

	.megamenu_outer_wrap {
		input[type='text'],
		input[type='password'],
		input[type='date'],
		input[type='datetime'],
		input[type='datetime-local'],
		input[type='email'],
		input[type='month'],
		input[type='number'],
		input[type='search'],
		input[type='tel'],
		input[type='time'],
		input[type='url'],
		input[type='week'] {
			padding: 0 6px;
		}
	}

	.megamenu-admin-modal td.mega-value p {
		margin: 0;
		font-style: italic;
	}

	[data-mega-tooltip] {
		position: relative;
		@include tooltip-popup-base;
	}

	// Optional placement (default mixin is below). Used e.g. for disabled mobile preview in footer toolbar.
	// Gap must clear a 9px square at 45° (~6.4px half-extent each way); 8px was too narrow and drew the
	// chevron inside the bubble. Use 14px gutter and center the arrow on it.
	[data-mega-tooltip][data-mega-tooltip-position="right"] {
		&:before {
			top: 50%;
			left: 100%;
			right: auto;
			margin-left: 14px;
			margin-top: 0;
			transform: translateY(-50%);
			text-align: start;
			white-space: normal;
			width: max-content;
			max-width: min(400px, calc(100vw - 100px));
			min-width: 0;
		}

		// SW-corner L + 45deg → tip points left (offset tuned vs :before margin-left).
		&:after {
			top: 50%;
			left: calc(100% + 14px);
			width: 9px;
			height: 9px;
			margin: 0;
			background: white;
			border-left: 1px solid var(--gray);
			border-bottom: 1px solid var(--gray);
			border-right: none;
			border-top: none;
			box-sizing: border-box;
			transform: translate(-50%, -50%) rotate(45deg);
		}
	}

	&.rtl [data-mega-tooltip][data-mega-tooltip-position="right"] {
		&:before {
			left: auto;
			right: 100%;
			margin-left: 0;
			margin-right: 14px;
			transform: translateY(-50%);
		}

		// NE-corner L + 45deg → tip points right; mirror LTR.
		&:after {
			left: auto;
			right: calc(100% + 14px);
			width: 9px;
			height: 9px;
			margin: 0;
			background: white;
			border-top: 1px solid var(--gray);
			border-right: 1px solid var(--gray);
			border-bottom: none;
			border-left: none;
			box-sizing: border-box;
			transform: translate(50%, -50%) rotate(45deg);
		}
	}

	[data-mega-tooltip][data-mega-tooltip-enabled] {
		&.mega-enabled:before {
			content: attr(data-mega-tooltip-enabled);
		}

		&.mega-disabled:before {
			content: attr(data-mega-tooltip-disabled);
		}
	}

	// Labels wrapping core `components-form-toggle` (styles from `wp-components`).
	.mega-mmm-enable-toggle,
	.mmm-settings-pill-field-label {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		max-width: 100%;
		cursor: pointer;
	}

	.mega-mmm-enable-toggle .components-form-toggle {
		flex-shrink: 0;
		margin-right: 4px;
	}

	// Location settings modal pill wrapper (label + switch inside).
	.mmm-settings-pill-field {
		display: inline-block;
		vertical-align: top;
		align-self: flex-start;
		margin: 0 0 14px 0;
		max-width: 100%;
		box-sizing: border-box;

		&:last-child {
			margin-bottom: 0;
		}
	}

	// Collapsed panel size — same for preview, location settings, and menu item (until expanded).
	$megamenu-modal-panel-collapsed-max-width: 1200px;
	$megamenu-modal-panel-collapsed-max-vh: 70vh;
	$megamenu-modal-panel-collapsed-height-cap: 960px;
	// Expanded: explicit calc so height/max-height can transition (not `auto` / `none`).
	$megamenu-modal-panel-expanded-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 40px);

	.megamenu-admin-modal {
		display: none;
		position: fixed;
		z-index: 100050;
		top: var(--wp-admin--admin-bar--height, 32px);
		right: 0;
		bottom: 0;
		left: 160px;
		margin: 0;
		border: none;
		outline: none;
		padding: 20px 24px;
		overflow: auto;
		box-sizing: border-box;
		flex-direction: row;
		// Stretch on the main axis only; keep cross-axis centering so height changes grow from the middle.
		align-items: center;
		justify-content: stretch;

		&.is-open {
			display: flex;
		}

		&.megamenu-admin-modal--wpcontent-expanded {
			.megamenu-admin-modal__panel {
				// Same width model as collapsed (`width: 100%` + max-width); only max-width grows — interpolates smoothly.
				max-width: 100%;
				// Stay centered like collapsed; do not stretch to top (that caused jump-then-expand-down).
				height: $megamenu-modal-panel-expanded-height;
				max-height: $megamenu-modal-panel-expanded-height;
				min-height: 0;
				// Match collapsed so margin doesn’t snap (auto → 0 was causing a horizontal jump with width).
				margin-inline: auto;
				margin-block: auto;
			}
		}

		&__backdrop {
			position: absolute;
			inset: 0;
			margin: 0;
			padding: 0;
			border: 0;
			background: $shadow-a45;
			cursor: pointer;
		}

		&__panel {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			// Interpolates cleanly to expanded `max-width: 100%` (avoid `width: min()` ↔ `100%` which jumps).
			width: 100%;
			max-width: $megamenu-modal-panel-collapsed-max-width;
			// Same expression for height + max-height so transitions don’t fight (was max-height: 70vh with height min(70vh, 960px)).
			$megamenu-modal-panel-collapsed-height: min(#{$megamenu-modal-panel-collapsed-max-vh}, #{$megamenu-modal-panel-collapsed-height-cap});
			max-height: $megamenu-modal-panel-collapsed-height;
			height: $megamenu-modal-panel-collapsed-height;
			min-height: 0;
			flex-shrink: 0;
			margin-inline: auto;
			margin-block: auto;
			align-self: center;
			background: white;
			border-radius: $modal-radius;
			box-shadow: $shadow-large;
			overflow: hidden;
			font-size: 14px;
			line-height: 1.5;
			transition:
				width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
				height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
				margin-inline 0.3s ease;

			@media (prefers-reduced-motion: reduce) {
				transition: none;
			}
		}

		&__header {
			flex: 0 0 auto;
			position: relative;
			z-index: 3;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
			width: 100%;
			box-sizing: border-box;
			padding: 0;
			background: white;
			min-height: 0;
			border-bottom: 0;
			box-shadow:
				0 1px 2px $shadow-a05,
				0 2px 10px $shadow-a07;

			.megamenu-admin-modal__title-group {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				gap: 12px 16px;
				flex: 1 1 auto;
				min-width: 0;
				width: 100%;
				box-sizing: border-box;
			}

			.megamenu-admin-modal__title-group > .megamenu-admin-modal__title {
				flex: 1 1 auto;
				min-width: 0;
			}

			.megamenu-admin-modal__title {
				display: flex;
				align-items: center;
				gap: 8px;
				margin: 0;
				min-width: 0;
				font-size: 16px;
				font-weight: 600;
				line-height: 1.3;
				letter-spacing: 0;
				color: var(--black);

				br {
					display: none;
				}
			}

			.megamenu-admin-modal__title-icon.dashicons {
				flex-shrink: 0;
				width: 24px;
				height: 24px;
				font-size: 24px;
				line-height: 1;
				color: var(--gray);
			}

			.megamenu-admin-modal__title-text {
				min-width: 0;
			}

			.megamenu_subtitle {
				margin: 0;
				font-size: 13px;
				font-family:
					-apple-system,
					BlinkMacSystemFont,
					"Segoe UI",
					Roboto,
					Oxygen-Sans,
					Ubuntu,
					Cantarell,
					"Helvetica Neue",
					sans-serif;
				color: var(--gray);
				line-height: 1.3;
				letter-spacing: 0;
			}

			.megamenu-admin-modal__header-meta {
				flex: 0 0 auto;
				align-self: center;
			}

			.megamenu-admin-modal__header-actions {
				position: static;
				flex-shrink: 0;
				margin-inline-start: auto;
				display: inline-flex;
				flex-direction: row;
				align-items: center;
				gap: 6px;

				.megamenu-modal-close {
					position: static;
					top: auto;
					right: auto;
					z-index: auto;
				}

					.megamenu-admin-modal__expand-btn {
					position: static;
					top: auto;
					right: auto;
					z-index: auto;

					.megamenu-admin-modal__expand-icon--contract {
						display: none;
					}

					&.megamenu-admin-modal__expand-btn--expanded {
						.megamenu-admin-modal__expand-icon--expand {
							display: none;
						}

						.megamenu-admin-modal__expand-icon--contract {
							display: inline-block;
						}
					}
				}
			}
		}

		&__header-top {
			display: flex;
			align-items: center;
			justify-content: stretch;
			gap: 24px;
			padding: 24px;
			position: relative;
			box-sizing: border-box;
			width: 100%;
			min-height: 0;

			.megamenu-admin-modal__title-group {
				flex: 1 1 auto;
				min-width: 0;
			}
		}

		&__body {
			flex: 1 1 auto;
			min-height: 0;
			overflow: hidden;
			padding: 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			textarea,
			input[type="text"],
			input[type="number"],
			input[type="search"],
			select {
				border-radius: 4px;
			}
		}

		// Centered loading overlay + spinner (preview iframe shell, location + menu item modal bodies).
		.megamenu-admin-modal__loading-host {
			position: relative;
		}

		.megamenu-admin-modal__loading-overlay {
			display: none;
			position: absolute;
			inset: 0;
			z-index: 2;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 12px;
			background: var(--light-gray);
			pointer-events: none;
		}

		.megamenu-admin-modal__loading-host--loading .megamenu-admin-modal__loading-overlay {
			display: flex;
		}

		.megamenu-admin-modal__loading-spinner {
			box-sizing: border-box;
			width: 36px;
			height: 36px;
			border: 3px solid var(--light-gray);
			border-top-color: var(--wp-admin-theme-color);
			border-radius: 50%;
			animation: megamenu-admin-modal-loading-spin 0.7s linear infinite;
		}

		@keyframes megamenu-admin-modal-loading-spin {
			to {
				transform: rotate(360deg);
			}
		}

		.megamenu-admin-modal__body-slot {
			flex: 1 1 auto;
			min-height: 0;
			overflow: auto;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}

		&.megamenu-location-settings-dialog &__body {
			padding: 0;
		}

		&.megamenu-location-settings-dialog &__body .megamenu-admin-modal__body-slot {
			padding: 8px $modal-padding-x 0;
		}

		&.megamenu-menu-item-dialog &__body {
			padding: 0;
		}

		// Footer bar: location settings (Save), preview (viewport). Menu item modal has no footer row.
		&__footer {
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 12px;
			padding: 24px;
			border-top: 0;

			p.submit {
				margin: 0;
				padding: 0;
				line-height: inherit;
			}

			.spinner {
				float: none;
				margin: 0;
				visibility: hidden;
			}
		}
	}

	// Scroll-down hint: bottom-center of the *panels* column (rail is 230px + 1fr; not the full dialog width).
	.mmm-scroll-hint {
		position: absolute;
		bottom: 20px;
		left: calc(50% + 230px / 2);
		transform: translateX(-50%);
		z-index: 5;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 12px 5px 8px;
		background: white;
		border: 1px solid var(--wp-admin-theme-color);
		border-radius: 20px;
		box-shadow: $shadow-small, 0 2px 6px $shadow-a12;
		color: var(--semidark-gray);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.4;
		cursor: pointer;
		white-space: nowrap;
		// Hidden until JS activates; visibility controls interactivity during fade.
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0s 0.2s;

		&.is-visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transition: opacity 0.2s ease, visibility 0s;
		}

		// Before JS runs (or after close), snap to hidden via display:none.
		&[hidden] {
			display: none !important;
		}

		.dashicons {
			font-size: 14px;
			width: 14px;
			height: 14px;
			line-height: 1;
			color: var(--gray);
		}

		&:hover {
			background: var(--feather-gray);
			border-color: var(--wp-admin-theme-color-darker-20);
			box-shadow: $shadow-small-hover;
		}

		&:focus-visible {
			@include mega-admin-focus-ring;
		}
	}

	// Appearance > Menus + RTL: rail columns swap (panels first / inline-start) — re-center over panels.
	&.rtl.nav-menus-php .megamenu-menu-item-dialog .mmm-scroll-hint {
		left: calc(50% - 230px / 2);
	}

	// Menu item modal body grid (sibling of .megamenu-admin-modal to avoid Sass duplicating `body` when nesting `.megamenu-admin-modal__*`).
	// Collapsed panel width/height match preview + location (shared `&__panel` above).
	.megamenu-admin-modal.megamenu-menu-item-dialog {
		.megamenu-admin-modal__header-actions .megamenu-menu-item-dialog-saving-indicator {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			margin: 0;
			padding: 0;
			flex-shrink: 0;
			pointer-events: none;

			&[hidden] {
				display: none !important;
			}

			.megamenu-menu-item-dialog-saving-indicator__icon {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 22px;
				height: 22px;
				font-size: 22px;
				line-height: 1;
				color: var(--gray);
				animation: mm-rotation 2s infinite linear;
			}
		}

		.megamenu-admin-modal__body .megamenu_outer_wrap {
			flex: 1 1 auto;
			min-height: 0;
			overflow: hidden;
			font-size: 14px;
			line-height: 1.5;

			.mega-tablist {
				button.megamenu-dialog-tab.mega_menu:before {
					content: "\f116";
				}

				button.megamenu-dialog-tab.general_settings:before {
					content: "\f111";
				}

				button.megamenu-dialog-tab.menu_icon:before {
					content: "\f128";
				}

				button.megamenu-dialog-tab.styling:before {
					content: "\f540";
				}

				button.megamenu-dialog-tab.roles:before {
					content: "\f110";
				}

				button.megamenu-dialog-tab.badge:before {
					content: "\f313"; // dashicons-awards
				}

				button.megamenu-dialog-tab .mm-tab-dirty-indicator {
					display: inline-flex;
					align-items: center;
					vertical-align: middle;
					margin-inline-start: 4px;

					.dashicons {
						width: 16px;
						height: 16px;
						font-size: 16px;
						line-height: 1;
						color: #dba617;
						speak: none;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}
			}

			.megamenu_tabs li.megamenu_tab_horizontal {
				font-size: 14px;
				padding: 5px 8px;
			}

			.filter_icons {
				font-size: 1em;
			}
		}
	}

	.megamenu-admin-modal.megamenu-location-settings-dialog.megamenu-location-settings-dialog--preview-visible {
		.megamenu-admin-modal__body.megamenu-location-settings-dialog__body-stack {
			background-color: white;
			background-image: none;
		}

		.megamenu-location-settings-dialog__preview-panel {
			flex: 1 1 auto;
			min-height: 360px;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.megamenu-location-settings-dialog__preview-toolbar {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 12px 20px;
			width: 100%;
			flex: 0 0 auto;
		}

		.megamenu-preview-dialog__preview-bg-field {
			display: inline-flex;
			align-items: center;
			gap: 10px;

			.megamenu-preview-dialog__bg-custom-cell {
				--mmm-preview-bg-hit: 30px;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				align-self: center;
				flex: 0 0 38px;
				box-sizing: border-box;
				width: 38px;
				height: 38px;
				min-width: 38px;
				min-height: 38px;
				padding: 3px;
				border-radius: 999px;
				border: 1px solid var(--light-gray);
				background: var(--light-gray);
				z-index: 1;

				> .megamenu-preview-dialog__bg-custom-color-input {
					position: absolute;
					width: 1px;
					height: 1px;
					padding: 0;
					margin: 0;
					border: 0;
					opacity: 0;
					pointer-events: none;
				}

				.mega-custom-color-input-wrapper {
					position: absolute;
					top: 50%;
					left: 50%;
					width: var(--mmm-preview-bg-hit);
					height: var(--mmm-preview-bg-hit);
					margin: 0;
					transform: translate(-50%, -50%);
					z-index: 2;
					border-radius: 50%;
					opacity: 0;
					cursor: pointer;

					.mega-color-picker-input-text {
						display: none !important;
					}

					.mega-custom-color-input-swatch {
						display: none !important;
					}
				}

				.megamenu-preview-dialog__bg-open-picker {
					position: absolute;
					top: 50%;
					left: 50%;
					width: var(--mmm-preview-bg-hit);
					height: var(--mmm-preview-bg-hit);
					margin: 0;
					transform: translate(-50%, -50%);
					z-index: 0;
					flex-shrink: 0;
					padding: 0;
					border: 0;
					border-radius: 50%;
					box-shadow: none;
					background: transparent;
					align-items: center;
					justify-content: center;

					&:not(:disabled):hover {
						background: color-mix(in srgb, var(--black) 4%, var(--feather-gray));
					}

					&:focus-visible {
						@include mega-admin-focus-ring(var(--gray), 2px);
					}
				}
			}

			.megamenu-preview-dialog__bg-swatch--preview {
				display: block;
				width: var(--mmm-preview-bg-hit);
				height: var(--mmm-preview-bg-hit);
				border-radius: 50%;
				box-sizing: border-box;
				flex-shrink: 0;
				background-color: white;
				box-shadow: inset 0 0 0 0.5px var(--light-gray);
				background-image: linear-gradient(
					135deg,
					white 44%,
					var(--gray) 44%,
					var(--gray) 56%,
					white 56%
				);

				&.megamenu-preview-dialog__bg-swatch--preview-transparent {
					background-color: white;
					background-image: linear-gradient(
						135deg,
						white 44%,
						var(--gray) 44%,
						var(--gray) 56%,
						white 56%
					);
				}
			}
		}

		.megamenu-preview-dialog__iframe-shell {
			position: relative;
			flex: 1 1 auto;
			min-height: 0;
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: stretch;
			background: transparent;
		}

		.megamenu-preview-dialog__iframe {
			flex: 1 1 auto;
			width: 100%;
			max-width: 100%;
			border: 0;
			min-height: 0;
			transition: max-width 0.2s ease-out;
			background-color: white;
			background-image:
				linear-gradient(45deg, var(--light-gray) 25%, transparent 25%),
				linear-gradient(-45deg, var(--light-gray) 25%, transparent 25%),
				linear-gradient(45deg, transparent 75%, var(--light-gray) 75%),
				linear-gradient(-45deg, transparent 75%, var(--light-gray) 75%);
			background-size: 16px 16px;
			background-position: 0 0, 0 8px, 8px -8px, -8px 0;
		}

		&.megamenu-preview-dialog--mobile-preview .megamenu-preview-dialog__iframe {
			max-width: var(--megamenu-preview-mobile-width, 390px);
			width: 100%;
		}

		.megamenu-admin-modal__footer {
			justify-content: flex-start;
			align-items: center;
			gap: 0;
		}
	}

	.megamenu-admin-modal.megamenu-scss-variables-dialog {
		#megamenu-scss-variables-dialog-body.megamenu-scss-variables-dialog__slot {
			display: flex;
			flex-direction: column;
			gap: 12px;
			min-height: 0;
			padding: 20px;
			box-sizing: border-box;
		}

		.megamenu-scss-variables-dialog__intro {
			margin: 0;
		}

		.megamenu-scss-vars-list {
			display: grid;
			grid-template-columns: minmax(0, auto) minmax(0, 1fr);
			column-gap: 20px;
			row-gap: 0;
			align-items: start;
			margin: 0;
			overflow: auto;
			padding: 0;
			border: 1px solid var(--light-gray);
			border-radius: $modal-radius;
			font-size: 12px;
			line-height: 1.45;
		}

		.megamenu-scss-vars-list dt {
			margin: 0;
			padding: 10px 0 10px 14px;
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
			font-weight: 600;
			color: var(--gray);
			border-bottom: 1px solid var(--light-gray);
		}

		.megamenu-scss-vars-list dd {
			margin: 0;
			padding: 10px 14px 10px 0;
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
			word-break: break-word;
			white-space: pre-wrap;
			border-bottom: 1px solid var(--light-gray);
			color: var(--black);
		}

		.megamenu-scss-vars-list dt:last-of-type,
		.megamenu-scss-vars-list dd:last-of-type {
			border-bottom: 0;
		}
	}

	.megamenu-admin-modal.megamenu-location-settings-dialog {
		--wp-components-color-primary: var(--wp-admin-theme-color);
		--wp-components-color-accent: var(--wp-admin-theme-color);

		.megamenu-admin-modal__header-top .megamenu-admin-modal__title-group {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
			align-items: center;
			column-gap: 12px;
			row-gap: 8px;
		}

		.megamenu-location-settings-dialog__title-start {
			min-width: 0;
		}

		.megamenu-admin-modal__header-top .megamenu-admin-modal__header-actions {
			justify-self: end;
			margin-inline-start: 0;
		}

		.megamenu-location-settings-dialog__title-heading.megamenu-admin-modal__title {
			min-width: 0;
		}

		.megamenu-location-settings-dialog__assigned {
			margin: 6px 0 0;
			max-width: 100%;
		}

		.megamenu-location-settings-dialog__title-cluster {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
		}

		.megamenu-location-settings-dialog__title-pin.dashicons {
			flex-shrink: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			font-size: 20px;
			line-height: 1;
		}

		// Segmented toggles: header Settings/Preview + footer viewport share track chrome.
		.megamenu-location-settings-dialog__mode-pill {
			display: inline-flex;
			align-items: center;
			justify-self: center;
			gap: 6px;
		}

		// Header Settings/Preview + footer viewport: shared track chrome.
		.megamenu-location-settings-dialog__mode-pill--settings-preview,
		.megamenu-location-settings-dialog__mode-pill--viewport-preview {
			@include megamenu-location-settings-dialog-mode-pill-track;
		}

		.megamenu-location-settings-dialog__mode-pill--settings-preview,
		.megamenu-location-settings-dialog__mode-pill--viewport-preview {
			background: var(--feather-gray);
		}

		.megamenu-location-settings-dialog__mode-pill--settings-preview .megamenu-location-settings-dialog__mode-pill-slider {
			background: var(--wp-admin-theme-color);
		}

		.megamenu-location-settings-dialog__mode-pill--settings-preview {
			@include megamenu-location-settings-dialog-mode-pill-slider-to-second(
				".megamenu-location-settings-dialog__mode-btn--preview.is-active"
			);
		}

		.megamenu-location-settings-dialog__mode-pill--viewport-preview {
			@include megamenu-location-settings-dialog-mode-pill-slider-to-second(
				".megamenu-preview-dialog__viewport-btn--desktop.is-active"
			);
		}

		.megamenu-location-settings-dialog__mode-pill--settings-preview,
		.megamenu-location-settings-dialog__mode-pill--viewport-preview {
			@include megamenu-location-settings-dialog-mode-pill-buttons;
		}

		// Preview footer: circular icon-only segments; dark grey thumb (not theme blue).
		.megamenu-location-settings-dialog__mode-pill--viewport-preview {
			--mmm-viewport-pill-hit: 30px;

			.megamenu-location-settings-dialog__mode-pill-slider {
				width: var(--mmm-viewport-pill-hit);
				height: var(--mmm-viewport-pill-hit);
				border-radius: 50%;
				background: var(--gray);
			}

			.megamenu-location-toolbar-btn.megamenu-location-settings-dialog__mode-btn {
				flex: 0 0 var(--mmm-viewport-pill-hit);
				width: var(--mmm-viewport-pill-hit);
				height: var(--mmm-viewport-pill-hit);
				min-width: var(--mmm-viewport-pill-hit);
				min-height: var(--mmm-viewport-pill-hit);
				padding: 0;
				border-radius: 50%;
				align-items: center;
				justify-content: center;

				&:focus-visible {
					@include mega-admin-focus-ring(var(--gray), 2px);
				}

				&.is-active:focus-visible {
					outline-color: white;
				}
			}
		}

		// Settings/Preview segment: inactive-button focus ring after shared `mode-pill-buttons` (`.is-active:focus-visible` keeps white ring via shared rules).
		.megamenu-location-settings-dialog__mode-pill--settings-preview .megamenu-location-toolbar-btn.megamenu-location-settings-dialog__mode-btn:not(.is-active):focus-visible {
			@include mega-admin-focus-ring(var(--wp-admin-theme-color), 1px);
		}

		.megamenu-location-settings-dialog__notices {
			display: flex;
			flex-direction: column;
			gap: 8px;
			width: 100%;
			margin: 0 0 14px;
			box-sizing: border-box;

			.notice {
				margin: 0;
				padding: 8px 12px;
			}
		}

		// Collapse wrapper when both preview notices are hidden (DOM is never :empty).
		.megamenu-location-settings-dialog__notices:not(:has(.megamenu-location-settings-dialog__notice:not([hidden]))) {
			display: none;
		}

		.megamenu-location-settings-dialog__mode-btn--preview:disabled {
			cursor: not-allowed;
			opacity: 0.55;
		}

		.megamenu-location-settings-dialog__mode-btn--preview {
			.megamenu-location-settings-dialog__preview-mode-icon--active {
				display: none;
			}

			&.is-active {
				.megamenu-location-settings-dialog__preview-mode-icon--idle {
					display: none;
				}

				.megamenu-location-settings-dialog__preview-mode-icon--active {
					display: inline-flex;
				}
			}
		}

		.megamenu-location-settings-dialog__body-stack {
			display: flex;
			flex-direction: column;
			flex: 1 1 auto;
			min-height: 0;
		}

		.megamenu-location-settings-dialog__settings-view,
		.megamenu-location-settings-dialog__preview-view {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		// `[hidden]` must win over `display: flex` above (otherwise both panes stay in the flex layout ~50/50).
		.megamenu-location-settings-dialog__settings-view[hidden],
		.megamenu-location-settings-dialog__preview-view[hidden] {
			display: none !important;
		}

		.megamenu-location-title {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.megamenu-admin-modal__body {
			.megamenu-location-settings-dialog__surface {
				margin: 0;
				padding: 0;
				border: 0;
				width: 100%;
				height: 100%;
				min-height: 0;
				box-sizing: border-box;
				font-size: 14px;
				display: flex;
				flex-direction: column;

				form.megamenu-location-settings-dialog-form {
					flex: 1 1 auto;
					min-height: 0;
					display: flex;
					flex-direction: column;
				}

				.megamenu-location-settings-dialog-theme-selector {
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 6px;
				}

				.megamenu-dialog-rail {
					flex: 1 1 auto;
					min-height: 0;
				}

				tr.mega-effect_mobile {
					td.mega-value {
						display: flex;
						flex-wrap: wrap;
						align-items: flex-end;
						column-gap: 24px;
						row-gap: 12px;
					}

					td.mega-value > label {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						margin: 0;
					}

					td.mega-value > label.mega-effect_mobile_direction {
						display: none;
					}

					&:has(select[name$="[effect_mobile]"] option[value="slide_left"]:checked)
						td.mega-value
						> label.mega-effect_mobile_direction,
					&:has(select[name$="[effect_mobile]"] option[value="slide_right"]:checked)
						td.mega-value
						> label.mega-effect_mobile_direction {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
					}
				}

				// Off-canvas + Sliding Panels: behaviour/default-state rows apply to accordion-style submenus only.
				table.mobile.mmm-settings-table {
					&:has(select[name$="[effect_mobile]"] option[value="slide_left"]:checked):has(
							select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
						)
						tr.mega-mobile_behaviour,
					&:has(select[name$="[effect_mobile]"] option[value="slide_left"]:checked):has(
							select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
						)
						tr.mega-mobile_state,
					&:has(select[name$="[effect_mobile]"] option[value="slide_right"]:checked):has(
							select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
						)
						tr.mega-mobile_behaviour,
					&:has(select[name$="[effect_mobile]"] option[value="slide_right"]:checked):has(
							select[name$="[effect_mobile_direction]"] option[value="horizontal"]:checked
						)
						tr.mega-mobile_state {
						display: none;
					}
				}

				.mega-tab-content-output_options textarea {
					flex: 1 1 auto;
					min-height: 0;
					width: 100%;
					box-sizing: border-box;
					font-family: monospace;
					font-size: 13px;
					line-height: 1.45;
					border: 0;
					background: transparent;
					resize: vertical;
					color: var(--semidark-gray);
					padding: 0;
				}

				.mega-tab-content-output_options .mmm-location-output-instruction {
					margin: 0;
					max-width: 100%;
					font-size: 13px;
					line-height: 1.45;
					color: var(--semidark-gray);
				}

				// Display Options: stacked rows in location modal.
				.mega-tab-content-output_options .mmm-location-output-options {
					display: flex;
					flex-direction: column;
					gap: 12px;
					width: 100%;
					box-sizing: border-box;
				}

				.mega-tab-content-output_options .mmm-location-output-options__row {
					display: grid;
					grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
					column-gap: 20px;
					align-items: stretch;
					padding: 10px;
					border: 0;
					border-radius: 0;
					background: transparent;
					box-shadow: none;
					box-sizing: border-box;
				}

				.mega-tab-content-output_options .mmm-location-output-options__row--heading {
					grid-template-columns: 1fr;
					padding: 10px;

					.mmm-location-output-options__heading h5 {
						margin: 0;
					}
				}

				.mega-tab-content-output_options .mmm-location-output-options__name.mega-name {
					min-width: 0;
					margin: 0;
					padding-right: 10px;
				}

				.mega-tab-content-output_options .mmm-location-output-options__value.mega-value {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					min-width: 0;
					min-height: 0;
					height: 100%;
					margin: 0;
					padding: 0;
					border-radius: 0;
					border: 0;
					background: transparent;
					box-sizing: border-box;
				}

				.mega-tab-content-output_options .mmm-location-output-options__value.mega-value > label {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					flex: 1 1 auto;
					min-height: 0;
					gap: 8px;
					margin: 0;
					width: 100%;
					font-size: 13px;
					line-height: 1.45;
					color: var(--gray);
				}

				// Section dashicons per rail tab (`megamenu-dialog-side-tab` supplies active/focus accent).
				.mega-tablist button {
					&::before {
						content: "\f111";
					}

					&[data-tab-section="general"]::before {
						content: "\f472";
					}

					&[data-tab-section="theme"]::before {
						content: "\f100";
					}

					&[data-tab-section="advanced"]::before {
						content: "\f107";
					}

					&[data-tab-section="output_options"]::before {
						content: "\f177";
					}

					&[data-tab-section="sticky"]::before {
						content: "\f103";
					}

					&[data-tab-section="overlay"]::before {
						content: "\f188";
					}

					&[data-tab-section="mobile"]::before {
						content: "\f470";
					}
				}

				.megamenu-dialog-panels {
					padding: 10px 32px 32px;
				}

				h5 {
					font-size: 12px;
				}
			}
		}

		// Rail tabs: active accent matches WP admin theme.
		.mega-tablist button {
			&.is-active {
				color: var(--wp-admin-theme-color);
				border-inline-start-color: var(--wp-admin-theme-color);

				&::before {
					color: var(--wp-admin-theme-color);
				}
			}

			&:focus-visible {
				@include mega-admin-focus-ring(var(--wp-admin-theme-color));
			}
		}

		button.megamenu-location-settings-dialog-save.button.button-primary {
			background: var(--wp-admin-theme-color);
			border-color: var(--wp-admin-theme-color);
			color: white;

			&:hover:not(:disabled),
			&:active:not(:disabled) {
				background: var(--wp-admin-theme-color-darker-10, var(--wp-admin-theme-color));
				border-color: var(--wp-admin-theme-color-darker-10, var(--wp-admin-theme-color));
				color: white;
			}

			&:focus-visible {
				box-shadow:
					0 0 0 1px white,
					0 0 0 3px var(--wp-admin-theme-color);
				outline: 2px solid transparent;
			}
		}
	}

	// Vertical rail: tab button chrome (WP admin accent); shared `@include megamenu-dialog-side-tab`.
	.mega-tablist button {
		@include megamenu-dialog-side-tab;

		&::before {
			color: var(--gray);
			display: inline-block;
			font-family: dashicons;
			speak: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			vertical-align: middle;
			margin-right: 8px;
			content: '\f463';
			font-size: 17px;
			width: 18px;
			transition: color 0.15s ease;
		}
	}

	// Let plugin settings pages use full #wpbody width (not Appearance > Menus, which shares this body class).
	&:not(.nav-menus-php) #wpbody-content > .wrap {
		margin-block-start: 0;
		margin-inline: 0;
		padding-inline: 0;
		padding-block-start: 0;
	}

	&:not(.nav-menus-php) #wpcontent {
		padding-inline-start: 0;
	}

	.megamenu_outer_wrap {
		display: inline-block;
		width: 100%;
		padding: 0;
		box-sizing: border-box;

		.notice {
			margin: 0 0 20px 0;
		}
	}

	// Menu-item modal + location settings modal + plugin settings page: two-column rail (modal: no gap; settings: gutter).
	.megamenu-admin-modal .megamenu-dialog-rail {
		@include megamenu-dialog-rail-grid;
	}

	.megamenu_wrap.megamenu-dialog-rail {
		@include megamenu-dialog-rail-grid($megamenu-settings-rail-gap, 0);
		background: white;

		@include tablet {
			grid-template-columns: 1fr;
			grid-template-rows: auto auto;
			row-gap: $megamenu-settings-rail-gap;
		}
	}

	.mega-tablist {
		@include megamenu-dialog-tablist-shell;
		padding-top: 10px;
	}

	.megamenu-admin-modal .megamenu-dialog-panels {
		@include megamenu-dialog-panels-shell;
	}

	.megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels {
		@include megamenu-dialog-panels-shell(visible);

		// After this block, unqualified shell would override a rule inside `@include tablet` on the parent.
		@include tablet {
			grid-column: 1;
			grid-row: 2;
		}
	}

	*:focus {
		box-shadow: 0 0 0;
	}

	.icon_dropdown {

		.select2-choice > .select2-chosen {
		    line-height: 28px;
		    margin-right: 0;
		}

		.select2-choice .select2-arrow {
		    display: none;
		}

		.select2-choice {
		    padding: 0 5px;
		    height: 28px;
		    color: var(--light-gray);
		    border: 1px solid var(--megamenu-form-control-border, var(--gray));
		}

		.select2-chosen i:before {
		    line-height: 28px;
		    font-size: 16px;
		    color: var(--semidark-gray);
		}

	}

	.tpx-select2-drop {
	    box-shadow: 0 0 0;
	    min-width: 150px;
	}

	.select2-results {
		margin: 4px 0 0 0;
		padding: 4px;
		list-style: none;
		display: flex;
		flex-flow: row wrap;
		align-items: center;

		// Group container LI
		.select2-result-with-children {
			width: 100% !important;
			flex: 0 0 100% !important;
			display: block !important;
			margin: 0 0 12px 0;
			box-sizing: border-box;

			// Group Header label (e.g. Dashicons)
			> .select2-result-label {
				display: block !important;
				font-size: 11px !important;
				font-weight: 600 !important;
				text-transform: uppercase !important;
				color: #646970 !important;
				letter-spacing: 0.5px !important;
				padding: 8px 6px 4px !important;
				border-bottom: 1px solid #f0f0f1 !important;
				margin-bottom: 8px !important;
				background: transparent !important;
			}

			// Sub-list holding the icons
			.select2-result-sub {
				margin: 0 !important;
				padding: 0 4px !important;
				list-style: none;
				display: grid !important;
				grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
				gap: 8px !important;
				justify-items: center !important;

				// Each individual icon item LI
				li.select2-result-focusable {
					display: flex !important;
					align-items: center !important;
					justify-content: center !important;
					width: 36px !important;
					height: 36px !important;
					border: 1px solid transparent !important;
					border-radius: 4px !important;
					cursor: pointer;
					box-sizing: border-box;
					flex: none !important;

					&:hover, &.select2-highlighted {
						background: #f0f0f1 !important;
						border-color: #dcdcde !important;
					}

					&.select2-selected {
						background: #e5f5fa !important;
						border-color: #00a0d2 !important;
						color: #0073aa !important;
					}

					.select2-result-label {
						padding: 0 !important;
						margin: 0 !important;
						font-size: inherit !important;
						text-transform: none !important;
						display: inline-flex !important;
						align-items: center !important;
						justify-content: center !important;
						width: 100% !important;
						height: 100% !important;
						border: none !important;

						i {
							margin: 0 !important;
							display: inline-block !important;
							width: 20px !important;
							height: 20px !important;
							font-size: 20px !important;
							line-height: 1 !important;
							text-align: center !important;
						}
					}
				}
			}
		}

		// Handle flat list items (direct children of .select2-results)
		> li.select2-result-focusable {
			flex: 0 0 auto !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			width: 36px !important;
			height: 36px !important;
			border: 1px solid transparent !important;
			border-radius: 4px !important;
			cursor: pointer;
			box-sizing: border-box;

			&:first-child {
				i {
					display: none !important;
				}
			}

			&:hover, &.select2-highlighted {
				background: #f0f0f1 !important;
				border-color: #dcdcde !important;
			}

			.select2-result-label {
				padding: 0 !important;
				margin: 0 !important;
				display: inline-flex !important;
				align-items: center !important;
				justify-content: center !important;
				font-size: 0.9em !important;

				i {
					margin: 0 !important;
					display: inline-block !important;
					width: 20px !important;
					height: 20px !important;
					font-size: 20px !important;
					line-height: 1 !important;
					text-align: center !important;
				}
			}
		}
	}

	.icon_dropdown .select2-choice > .select2-chosen i,
	.select2-result-label i {
		margin: 0;
	    display: inline-block;
	    width: 20px;
	    height: 20px;
	    font-size: 20px;
	    line-height: 1;
	    font-family: dashicons;
	    text-decoration: inherit;
	    font-weight: normal;
	    font-style: normal;
	    vertical-align: top;
	    text-align: center;
	    transition: color .1s ease-in 0;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	}

	.mmm-icon-selector-container {
		position: relative;
		display: inline-block;
		vertical-align: middle;

		* {
			box-sizing: border-box;
		}
	}

	.mmm-icon-selector-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 28px;
		padding: 0;
		background: #fff;
		border: 1px solid var(--megamenu-form-control-border, var(--gray));
		border-radius: 4px;
		cursor: pointer;
		color: #2c3338;
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		position: relative;

		&:hover {
			border-color: #8c8f94;
			color: #1d2327;
		}

		&:focus {
			border-color: #2271b1;
			box-shadow: 0 0 0 1px #2271b1;
			outline: none;
		}
	}

	.mmm-icon-selector-trigger-preview {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: #2c3338;

		svg {
			width: 18px;
			height: 18px;
			display: block;
			stroke: currentColor;
			stroke-width: 2.5;
		}

		i {
			font-size: 20px;
			width: 20px;
			height: 20px;
			line-height: 1;
			display: inline-block;
			text-align: center;
		}
	}

	.mega-material-symbol {
		font-family: var(--wp--preset--font-family--material-symbols) !important;
		font-style: normal;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;

		&:before {
			content: attr(data-ms-icon);
		}
	}

	.mmm-icon-selector-trigger-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 15px;
	}

	.mmm-icon-selector-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 9999;
		margin-top: 4px;
		background: #fff;
		border: 1px solid #ccd0d4;
		border-radius: 4px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		width: 200px;
	}

	.mmm-icon-selector-search-wrap {
		padding: 8px;
		border-bottom: 1px solid #f0f0f1;
		background: #f6f7f7;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.mmm-icon-selector-search {
		width: 100% !important;
		height: 30px !important;
		padding: 4px 8px !important;
		border: 1px solid #8c8f94 !important;
		border-radius: 4px !important;
		background: #fff !important;
		font-size: 13px !important;

		&:focus {
			border-color: #2271b1 !important;
			box-shadow: 0 0 0 1px #2271b1 !important;
			outline: none !important;
		}
	}

	.mmm-icon-selector-list {
		overflow-y: auto;
		padding: 4px;
	}

	.mmm-icon-selector-group-title {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-weight: 600;
		color: #646970;
		padding: 8px 8px 4px 8px;
		border-bottom: 1px solid #f0f0f1;
		margin-bottom: 6px;
	}

	.mmm-icon-selector-group-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
		justify-items: center;
		gap: 8px;
		padding: 4px;
		margin-bottom: 10px;
	}

	.mmm-icon-selector-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;
		color: var(--gray);
		transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

		&:hover, &.mmm-focused {
			background: var(--light-gray);
			color: var(--black);
		}

		&.mmm-selected {
			color: var(--wp-admin-theme-color);
			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
		}

		&.mmm-selected:hover, &.mmm-selected.mmm-focused {
			background: var(--light-gray);
			color: var(--wp-admin-theme-color);
		}

		&[data-value="disabled"] {
			width: auto;
			margin: 4px 8px;
			box-sizing: border-box;
			height: 30px;
			justify-content: flex-start;
			padding: 0 8px;
			font-size: 13px;
			color: #646970;

			.mmm-icon-selector-item-preview {
				border: 1px dashed #ccd0d4;
				background: #f6f7f7;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(-45deg);
					width: 12px;
					height: 1px;
					background: #d63638;
				}
			}
		}
	}

	.mmm-icon-selector-item-preview {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		flex-shrink: 0;

		svg {
			width: 20px;
			height: 20px;
			display: block;
			stroke: currentColor;
		}

		i {
			font-size: 20px;
			width: 20px;
			height: 20px;
			line-height: 1;
			display: inline-block;
			text-align: center;
		}
	}

	.mmm-multi-preview {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		place-items: center;
		width: 100%;

		.mmm-multi-preview-item {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			height: 18px;
			flex-shrink: 0;

			svg {
				width: 16px;
				height: 16px;
				display: block;
				stroke: currentColor;
				stroke-width: 2.5;
			}

			i {
				font-size: 16px;
				width: 16px;
				height: 16px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.mmm-icon-selector-multi {
		.mmm-icon-selector-trigger {
			width: 120px;
			padding: 0 12px;
			min-width: 120px;
		}

		.mmm-icon-selector-trigger-preview {
			width: 100%;
			height: auto;
		}

		.mmm-icon-selector-dropdown {
			width: 400px;
		}

		.mmm-icon-selector-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
			align-items: start;
		}

		.mmm-icon-selector-item[data-value="disabled"] {
			grid-column: 1 / -1;
		}

		.mmm-icon-selector-group-container {
			display: flex;
			flex-direction: column;
			gap: 4px;
			padding: 4px 8px;
		}

		.mmm-icon-selector-item {
			width: 100%;
			height: 32px;
			padding: 0;
			box-sizing: border-box;

			&[data-value="disabled"] {
				width: auto;
				margin: 4px 8px;
			}
		}

		.mmm-icon-selector-item-preview:not(.mmm-disabled-preview) {
			width: 100%;
			height: auto;
		}
	}

	.mmm-disabled-preview {
		border: 1px dashed #ccd0d4;
		border-radius: 2px;
		background: #f6f7f7;
		position: relative;
		width: 16px;
		height: 16px;
		margin-right: 8px;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(-45deg);
			width: 12px;
			height: 1px;
			background: #d63638;
		}
	}

	.mmm-icon-selector-item-label {
		display: none;
	}

	.mmm-icon-selector-item[data-value="disabled"] {
		.mmm-icon-selector-item-label {
			display: inline-block;
			margin-left: 8px;
		}
	}

	.megamenu_header {
		position: relative;
		z-index: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 8px 20px;
		background: white;
		padding: 30px 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid var(--feather-gray);
		box-shadow:
			0 1px 2px $shadow-a05,
			0 2px 10px $shadow-a07;
		width: 100%;
		box-sizing: border-box;

		.megamenu_header_left {
			flex: 1 1 200px;
			min-width: 0;

			.megamenu_header_title_row {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				margin-bottom: 10px;
			}

			.megamenu_header_icon {
				flex-shrink: 0;
				width: 28px;
				height: 28px;
				object-fit: contain;
			}

			.megamenu_header_title_row h2 {
				margin: 0;
				padding: 0;
				line-height: 1.2;
			}
		}

		.megamenu_header_right {
			margin-inline-start: auto;
		}

		.megamenu_header_right ul {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 14px;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.version {
			color: var(--gray);
			margin-bottom: 0;
			font-size: 12px;
		}
	}

	.megamenu_wrap.megamenu-dialog-rail > .mega-tablist {
		@include tablet {
			grid-column: 1;
			grid-row: 1;
			overflow-x: auto;
			overflow-y: visible;
		}

		nav.mega-page-navigation ul {
			list-style: none;
			margin: 0;
			padding: 0;

			@include tablet {
				display: flex;
				flex-flow: row wrap;
				align-items: stretch;
				justify-content: center;
				column-gap: 12px;
				row-gap: 8px;
			}

			li {
				margin: 0;
				padding: 0;

				@include tablet {
					display: flex;
					flex: 0 0 auto;
				}

				a {
					@include megamenu-dialog-side-tab;
					text-decoration: none;

					// Match `.mega-tablist button::before` (block tab + inline-block icon).
					&::before {
						color: var(--gray);
						display: inline-block;
						font-family: dashicons;
						speak: none;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						vertical-align: middle;
						margin-right: 8px;
						content: none;
						font-size: 17px;
						width: 18px;
						transition: color 0.15s ease;
					}

					@include tablet {
						display: inline-flex;
						align-items: center;
						width: auto;
						margin-bottom: 0;
						text-align: center;
						border-inline-start: 3px solid transparent;
						border-bottom: 3px solid transparent;

						&:hover {
							border-inline-start-color: transparent;
						}

						&.is-active {
							border-inline-start-color: transparent;
							box-shadow: none;
							border-bottom-color: var(--wp-admin-theme-color);
						}

						&::before {
							margin-right: 6px;
						}
					}
				}

				&.menu_locations a::before {
					content: '\f230';
				}

				&.theme_editor a::before {
					content: '\f100';
				}

				&.general_settings a::before {
					content: '\f111';
				}

				&.tools a::before {
					content: '\f107';
				}

				&.license a::before,
				&.licence a::before {
					content: '\f112';
				}
			}
		}
	}

	h3.first {
		margin-top: 0;
	}

	h3 {
		display: flow-root;
		font-size: 1.1em;
		margin: 17px 0 5px 0;
		text-indent: 1px;
	    border-bottom: 1px solid var(--light-gray);
	    padding: 0 0 10px 0;
	}

	h3 span {
		margin-right: 10px;
	}

	a {
		text-decoration: none;
	}

	.duplicate {
		margin-left: 15px;
	}

	.megamenu_submit {
		margin-bottom: 40px;
		padding-top: 35px;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 8px 16px;
		box-sizing: border-box;

		p.submit {
			margin: 0;
			padding: 0;
		}
	}

	// Shared admin utility / tab callouts (was duplicated under location modal + Menu Locations settings).
	.mega-vertical-align-top {
		vertical-align: top;
	}

	.megamenu-admin-modal.megamenu-location-settings-dialog .megamenu-admin-modal__body .megamenu-location-settings-dialog__surface .mega-tab-content .warning,
	.megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels .menu_settings.menu_settings_menu_locations .mega-tab-content .warning {
		margin: 20px 0 0 0;
	}

	.megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels {
		padding: 20px 24px 0 0;
		box-sizing: border-box;
		min-height: 400px;

		@include tablet {
			padding: 24px;
		}

		textarea.mega-export {
			width: 100%;
			height: 150px;
			font-family: monospace;
			margin-bottom: 10px;
			font-size: 0.9em;
		}

		.megamenu-nav-tab-wrapper {
			position: sticky;
			top: 0;
			z-index: 22;
			margin: 0;
			padding: 6px 0 10px;
			display: inline-flex;
			align-items: center;
			align-content: center;
			height: 64px;
			gap: 30px;
			width: 100%;
			border: 0;
			box-sizing: border-box;
			background: white;
			box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);

			@include tablet {
				gap: 16px;
				justify-content: space-between;
			}

			button.mega-tab {
				appearance: none;
				font: inherit;
				display: flex;
				cursor: pointer;
				height: 100%;
				align-content: center;
				flex-wrap: wrap;
				color: var(--semidark-gray);
				font-weight: 500;
				font-size: 14px;
				padding: 0 5px;
				margin: 0;
				background: transparent;
				border: 0;
				box-shadow: none;
				text-decoration: none;
				text-align: inherit;

				&:hover {
					color: var(--wp-admin-theme-color);
				}

				&.nav-tab-active {
					background: white;
					position: relative;
					z-index: 1;
					color: var(--wp-admin-theme-color);
				}
			}

			@include nav-tab-slider-indicator;
		}


		.menu_settings {

			&.menu_settings_menu_themes {
				form.theme_editor {
					// Fill the viewport column so the sticky save bar sits on the bottom even on short tabs.
					// `--mmm-theme-editor-outside-form`: header, theme selector, rails, wp padding (approximate).
					--mmm-theme-editor-outside-form: clamp(260px, 38vh, 480px);
					--mmm-theme-editor-form-tabs-nav-submit: clamp(140px, 18vh, 200px);

					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					min-height: calc(
						100dvh - var(--mmm-admin-bar-offset, 0px) - var(--mmm-theme-editor-outside-form)
					);
					.mega-theme-font-option {
						display: inline-flex;
						align-items: center;
						gap: 6px;
						min-height: 28px;
						vertical-align: middle;

						.mega-theme-font-option__reveal {
							display: none;
							align-items: center;
							justify-content: center;
							box-sizing: border-box;
							width: 2.5rem;
							height: 28px;
							min-height: 28px;
							margin: 0;
							padding: 0;
							border: 1px solid #949494;
							border-radius: 2px;
							background: #fff;
							box-shadow: 0 0 0 transparent;
							color: var(--semidark-gray);
							cursor: pointer;
							line-height: 1;
							vertical-align: middle;
							appearance: none;

							&:hover {
								border-color: var(--medium-gray);
								color: var(--black);
							}

							&:focus {
								border-color: var(--wp-admin-theme-color, #2271b1);
								box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
								outline: 2px solid transparent;
								outline-offset: 0;
							}

							.dashicons {
								width: 18px;
								height: 18px;
								font-size: 18px;
								line-height: 1;
							}
						}

						.mega-theme-font-option__select {
							min-width: 12em;
							max-width: 100%;
						}

						&.mega-theme-font-option--collapsed {
							.mega-theme-font-option__reveal {
								display: inline-flex;
							}

							.mega-theme-font-option__select {
								display: none;
							}
						}
					}

					> .megamenu-nav-tab-wrapper {
						flex: 0 0 auto;
					}

					> div.mega-tab-content {
						flex: 1 1 auto;
						min-height: max(
							0px,
							calc(
								100dvh - var(--mmm-admin-bar-offset, 0px) - var(--mmm-theme-editor-outside-form) -
									var(--mmm-theme-editor-form-tabs-nav-submit)
							)
						);
					}

					> .megamenu_submit {
						position: sticky;
						bottom: 0;
						flex: 0 0 auto;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						justify-content: flex-start;
						column-gap: 16px;
						row-gap: 10px;
						margin-top: auto;
						margin-bottom: 0;
						z-index: 25;
						background: white;
						padding: 20px 0 22px;
						box-sizing: border-box;
						box-shadow:
							0 -1px 0 var(--light-gray),
							0 -8px 24px $shadow-a07;

						> p.submit {
							flex: 0 0 auto;
							margin: 0;
							padding: 0;

						}

						.megamenu-theme-editor-submit__preview-after {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							gap: 10px 12px;
							min-width: 0;
						}

						.megamenu-preview-after__row {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							gap: 10px 12px;
							min-width: 0;
						}

						.megamenu-preview-after__toggle-label {
							display: inline-flex;
							align-items: center;
							gap: 8px;
							margin: 0;
							cursor: pointer;
							font-size: 13px;
							line-height: 1.4;
							color: var(--semidark-gray);
						}

						.megamenu-preview-after__toggle-label .components-form-toggle {
							flex-shrink: 0;
						}

						.megamenu-preview-after__label-text {
							font-size: inherit;
							line-height: inherit;
							color: inherit;
						}

						.megamenu-preview-after__location-select {
							@include mega-toolbar-native-select;
							width: auto;
							min-width: 160px;
							max-width: min(300px, 100%);
						}
					}
				}

				.theme_selector {
					margin-bottom: 20px;
					display: flex;
					flex-wrap: wrap;
					row-gap: 12px;
					column-gap: 32px;
					overflow: visible;
					box-sizing: border-box;

					.theme-selector-field {
						display: flex;
						flex-direction: column;
						align-items: stretch;
						gap: 4px;
						min-width: 0;
					}

					.theme-editor-actions-group {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						gap: 4px;
						min-width: 0;
					}

					// Same treatment as `label span.mega-short-desc` in `.megamenu_outer_wrap table` (location dialog / theme fields).
					.theme-selector-field .mega-short-desc,
					.theme-editor-actions-group .mega-short-desc {
						@include mega-toolbar-field-label;
					}

					.theme-editor-actions-group > .mega-short-desc {
						margin: 0 0 0 1px;
					}

					// Native menulist (single chevron): core `.wp-core-ui select` adds a Dashicon
					// `background-image` — clear it or two arrows show.
					select#theme_selector,
					select {
						@include mega-toolbar-native-select;
					}
				}

				// Toggle Bar Designer: block-type picker (labeled `<select>` only — no card chrome or custom select styling).
				form.theme_editor .mega-toggle-block-selector-field {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 4px;
					margin: 0 0 20px;
					max-width: 100%;

					.mega-short-desc {
						@include mega-toolbar-field-label;
					}

					select#toggle-block-selector {
						max-width: 100%;
					}
				}

				.mega-theme-editor-actions {
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 10px;
					margin: 0;
					overflow: visible;
				}

				// Theme toolbar icon buttons — markup: `.button.button-secondary.button-compact.mega-theme-editor-action`.
				.mega-theme-editor-actions button.mega-theme-editor-action.megamenu-preview-open {
					font: inherit;
					text-align: center;
				}

				.mega-theme-editor-action.is-busy {
					pointer-events: none;
					opacity: 0.65;
				}

				.mega-theme-editor-action:not(.mega-theme-editor-action--location-preview) {
					position: relative;
					overflow: visible;
					text-decoration: none;
					@include megamenu-admin-modal-ghost-icon-btn;

					&.mega-theme-editor-action--export .dashicons,
					&.mega-theme-editor-action--import .dashicons {
						transform: rotate(90deg);
					}
				}

			}

			div.mega-tab-content {
			    position: relative;
			    display: block;
			    width: 100%;
			    padding: 10px 0 0;
			    box-sizing: border-box;

			    &.mega-toggle-disabled {
			    	.mega-toggle_blocks td:after,
			    	.mega-toggle_bar_background td:after,
			    	.mega-toggle_bar_height td:after,
			    	.mega-toggle_bar_border_radius td:after,
			    	.mega-mobile_menu_overlay td:after,
			    	.mega-mobile_menu_force_width td:after {
			    		@include disabled-row-overlay;
			    	}

				    .mega-mobile_toggle_disabled {
				    	display: table-row;
				    }
			    }

			    &.mega-mobile-disabled {
			    	tr:not(.mega-responsive_breakpoint):not(.mega-responsive_breakpoint_disabled) td:after {
			    		@include disabled-row-overlay;
			    	}

				    .mega-responsive_breakpoint_disabled {
				    	display: table-row;
				    }

				    .mega-mobile_toggle_disabled {
				    	display: none;
				    }
			    }

			    .mega-responsive_breakpoint_disabled,
			    .mega-mobile_toggle_disabled {
				    display: none;

				    td {
					    padding-top: 10px;
					    padding-bottom: 10px;
					    border-top: 0;
				    }

				    h5 {
					    border: 1px solid var(--light-gray);
					    padding: 10px;
					    box-sizing: border-box;
					    border-left: 3px solid $success;
					    font-size: 12px;
					    font-weight: normal;
					    margin: 0 10px;
				    }
			    }

			    table.mmm-settings-table td.mega-heading-cell {
			    	vertical-align: top;
			    	padding-bottom: 0;

			    	h5 {
			    		margin: 0;
			    		font-size: 12px;
			    	}

			    	p.mega-description {
			    		margin: 0;
			    		font-size: 13px;
			    		line-height: 1.45;
			    		color: var(--gray);
			    	}
			    }

			    table.mmm-settings-table tr:first-of-type td.mega-heading-cell {
			    	padding-bottom: 20px;
			    	padding-top: 0;
			    }

			    table.mmm-settings-table td.mega-heading-cell .mega-description {
			    	font-style: italic;
			    }
			}
		}

	}

}

// Theme editor (Menu Themes): tab strip stays under WP admin bar when sticky; save row pins to viewport bottom.
body.maxmegamenu-admin.admin-bar .megamenu_wrap.megamenu-dialog-rail > .megamenu-dialog-panels .megamenu-nav-tab-wrapper {
	top: 32px;

	@media screen and (max-width: 782px) {
		top: 46px;
	}
}

@keyframes mm-mega-widget-selector-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
	50% {
		box-shadow: 0 0 0 3px $focus-ring-blue-soft;
	}
}

@keyframes mm-rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

body.folded.maxmegamenu-admin .toggle-bar-designer .mega-blocks .block.mega-open .block-settings {
	left: 36px;
	width: calc(100% - 36px - 10%);
}

body.maxmegamenu-admin:has(.toggle-bar-designer .mega-open)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 30;
	pointer-events: auto;
	background: rgba(0, 0, 0, 0.4);
}