/**
 * iDigital Menu — Slide style (chanel.com mobile inspired)
 * استایل آفلاین، بدون فونت وب، scoped.
 */

.iddd-menu {
	--iddd-menu-bg: #ffffff;
	--iddd-menu-fg: #1a1a1a;
	--iddd-menu-fg-muted: #888888;
	--iddd-menu-fg-hover: #000000;
	--iddd-menu-border: #ececec;
	--iddd-menu-row-hover-bg: #fafafa;
	--iddd-item-py: 18px;
	--iddd-item-px: 20px;
	--iddd-item-fs: 15px;
	--iddd-indicator-size: 18px;
	--iddd-indicator-color: var(--iddd-menu-fg-muted);
	--iddd-item-icon-size: 24px;
	--iddd-item-icon-radius: 0px;
	--iddd-item-image-size: 56px;
	--iddd-item-image-radius: 8px;
	--iddd-item-image-fit: cover;
	--iddd-item-media-gap: 14px;

	/* Row separator (root menu). */
	--iddd-row-bw: 1px;
	--iddd-row-bos: 0px;
	--iddd-row-boe: 0px;

	/* Root-level grid (cards) tokens. Only active when .iddd-rgrid is present. */
	--iddd-row-cols: 2;
	--iddd-row-col-gap: 8px;
	--iddd-row-row-gap: 8px;
	--iddd-row-card-radius: 8px;
	--iddd-row-card-bw: 1px;
	--iddd-row-card-bc: var(--iddd-menu-border);
	--iddd-row-card-bg: transparent;
	--iddd-row-card-padding: 12px;

	/* Submenu (per-level) tokens — fall back to base. */
	--iddd-sub-fg: var(--iddd-menu-fg);
	--iddd-sub-fg-hover: var(--iddd-menu-fg-hover);
	--iddd-sub-bg: var(--iddd-menu-bg);
	--iddd-sub-border: var(--iddd-menu-border);
	--iddd-sub-py: var(--iddd-item-py);
	--iddd-sub-px: var(--iddd-item-px);
	--iddd-sub-fs: var(--iddd-item-fs);
	--iddd-sub-bw: var(--iddd-row-bw);
	--iddd-sub-bos: 0px;
	--iddd-sub-boe: 0px;
	--iddd-sub-cols: 1;
	--iddd-sub-col-gap: 0px;
	--iddd-sub-row-gap: 0px;

	/* Parent (drilled-into) row inside a submenu. */
	--iddd-parent-fg: var(--iddd-sub-fg);
	--iddd-parent-bg: transparent;
	--iddd-parent-fs: 16px;
	--iddd-parent-fw: 600;
	--iddd-parent-bw: 2px;
	--iddd-parent-bc: var(--iddd-sub-fg);
	--iddd-parent-bos: 0px;
	--iddd-parent-boe: 0px;

	/* Back button + panel title (submenu header). */
	--iddd-back-fg: var(--iddd-menu-fg-muted);
	--iddd-back-fg-hover: var(--iddd-menu-fg-hover);
	--iddd-back-icon-color: var(--iddd-back-fg);
	--iddd-back-icon-color-hover: var(--iddd-back-fg-hover);
	--iddd-back-bg: transparent;
	--iddd-back-bg-hover: transparent;
	--iddd-back-fs: 12px;
	--iddd-back-fw: 500;
	--iddd-back-icon-size: 16px;
	--iddd-back-inner-gap: 8px;
	--iddd-back-gap: 14px;
	--iddd-back-radius: 0px;
	--iddd-back-bw: 0px;
	--iddd-back-bw-color: transparent;
	--iddd-panel-title-fg: var(--iddd-menu-fg);
	--iddd-panel-title-fs: 14px;

	/* Item-entrance animation tokens. */
	--iddd-anim-dur: 360ms;
	--iddd-anim-stagger: 55ms;
	--iddd-anim-dist: 18px;
	--iddd-anim-ease: cubic-bezier(.22, .61, .36, 1);
	--iddd-anim-root-delay: 0ms;

	--iddd-menu-dur: 350ms;
	--iddd-menu-ease: cubic-bezier(.22, .61, .36, 1);
	--iddd-min-height: 1px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	background: var(--iddd-menu-bg);
	color: var(--iddd-menu-fg);
	font-family: 'Vazirmatn', Tahoma, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.4;
}
.iddd-menu *,
.iddd-menu *::before,
.iddd-menu *::after {
	box-sizing: border-box;
}
.iddd-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.iddd-menu a {
	color: inherit;
	text-decoration: none;
}
.iddd-menu button {
	font-family: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.iddd-menu .iddd-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	pointer-events: none;
	color: var(--iddd-menu-fg-muted);
}
.iddd-menu .iddd-icon svg {
	width: 100%;
	height: 100%;
}

/* — Slide style — */

.iddd-menu--slide .iddd-stack {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: var(--iddd-min-height);
	transition: height var(--iddd-menu-dur) var(--iddd-menu-ease);
}

.iddd-menu--slide .iddd-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--iddd-menu-bg);
	transform: translateX(100%);
	transition: transform var(--iddd-menu-dur) var(--iddd-menu-ease);
	will-change: transform;
}

/* Active panel takes the natural flow so the stack has a sensible height
   even before JS measures it. */
.iddd-menu--slide .iddd-panel--active {
	position: relative;
	inset: auto;
	transform: translateX(0);
	z-index: 2;
}

.iddd-menu--slide .iddd-panel--behind {
	transform: translateX(-100%);
	z-index: 1;
}

/* RTL flips the slide direction so deeper levels feel like "going forward". */
[dir="rtl"] .iddd-menu--slide .iddd-panel { transform: translateX(-100%); }
[dir="rtl"] .iddd-menu--slide .iddd-panel--active { transform: translateX(0); }
[dir="rtl"] .iddd-menu--slide .iddd-panel--behind { transform: translateX(100%); }

/* — Panel header (back + title) — */

.iddd-menu--slide .iddd-panel-header {
	display: flex;
	align-items: center;
	gap: var(--iddd-back-gap);
	padding: 14px var(--iddd-item-px);
	border-bottom: 1px solid var(--iddd-menu-border);
}

.iddd-menu--slide .iddd-back-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--iddd-back-inner-gap);
	background: var(--iddd-back-bg);
	color: var(--iddd-back-fg);
	font-size: var(--iddd-back-fs);
	font-weight: var(--iddd-back-fw);
	letter-spacing: .04em;
	border: var(--iddd-back-bw) solid var(--iddd-back-bw-color);
	border-radius: var(--iddd-back-radius);
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.iddd-menu--slide .iddd-back-btn:hover,
.iddd-menu--slide .iddd-back-btn:focus-visible {
	color: var(--iddd-back-fg-hover);
	background: var(--iddd-back-bg-hover);
	outline: none;
}
.iddd-menu--slide .iddd-back-btn .iddd-back-icon {
	width: var(--iddd-back-icon-size);
	height: var(--iddd-back-icon-size);
	color: var(--iddd-back-icon-color);
	transition: transform .25s ease, color .15s ease;
}
.iddd-menu--slide .iddd-back-btn:hover .iddd-back-icon,
.iddd-menu--slide .iddd-back-btn:focus-visible .iddd-back-icon {
	color: var(--iddd-back-icon-color-hover);
	transform: translateX(-2px);
}
[dir="rtl"] .iddd-menu--slide .iddd-back-btn:hover .iddd-back-icon,
[dir="rtl"] .iddd-menu--slide .iddd-back-btn:focus-visible .iddd-back-icon {
	transform: translateX(2px);
}

/* Icon-only back button → square hit-area for clarity. */
.iddd-menu--slide.iddd-back-icon_only .iddd-back-btn {
	gap: 0;
	min-width: calc(var(--iddd-back-icon-size) + 12px);
	justify-content: center;
}

.iddd-menu--slide .iddd-panel-title {
	margin: 0;
	font-size: var(--iddd-panel-title-fs);
	font-weight: 600;
	color: var(--iddd-panel-title-fg);
	letter-spacing: .03em;
	flex: 1;
}

/* — List items — */

.iddd-menu--slide .iddd-list-item {
	position: relative;
}
/* Row separator drawn via ::after for full positional control (start/end offsets, width). */
.iddd-menu--slide .iddd-list-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: var(--iddd-row-bw, 1px);
	background: var(--iddd-menu-border);
	pointer-events: none;
	inset-inline-start: 0;
	inset-inline-end: 0;
}
.iddd-menu--slide .iddd-list-item:last-child::after {
	display: none;
}

/* Row border position presets (root menu). */
.iddd-menu--slide.iddd-rborder-padding .iddd-list-item::after {
	inset-inline-start: var(--iddd-item-px);
	inset-inline-end: var(--iddd-item-px);
}
.iddd-menu--slide.iddd-rborder-full .iddd-list-item::after {
	inset-inline-start: 0;
	inset-inline-end: 0;
}
.iddd-menu--slide.iddd-rborder-custom .iddd-list-item::after {
	inset-inline-start: var(--iddd-row-bos);
	inset-inline-end: var(--iddd-row-boe);
}

.iddd-menu--slide .iddd-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--iddd-item-media-gap);
	width: 100%;
	padding: var(--iddd-item-py) var(--iddd-item-px);
	color: var(--iddd-menu-fg);
	font-size: var(--iddd-item-fs);
	font-weight: 500;
	letter-spacing: .02em;
	text-align: inherit;
	transition: background-color .18s ease, color .18s ease;
}
.iddd-menu--slide .iddd-link:hover,
.iddd-menu--slide .iddd-link:focus-visible {
	background-color: var(--iddd-menu-row-hover-bg);
	color: var(--iddd-menu-fg-hover);
	outline: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Root-level GRID (card) layout — opt-in via the `iddd-rgrid` class on root.
   Replaces the default vertical list with a CSS Grid of card-style rows.
   ─────────────────────────────────────────────────────────────────────────── */
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-list {
	display: grid;
	grid-template-columns: repeat(var(--iddd-row-cols, 2), minmax(0, 1fr));
	column-gap: var(--iddd-row-col-gap, 0px);
	row-gap: var(--iddd-row-row-gap, 0px);
	padding: 0;
}
/* Hide the row separator (it doesn't fit a grid) — borders live on the card. */
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-list-item::after {
	display: none;
}
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-list-item {
	display: block;
}
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-link {
	width: 100%;
	height: 100%;
	padding: var(--iddd-row-card-padding, 12px);
	background: var(--iddd-row-card-bg, transparent);
	border: var(--iddd-row-card-bw, 1px) solid var(--iddd-row-card-bc, transparent);
	border-radius: var(--iddd-row-card-radius, 8px);
	justify-content: center;
	align-items: center;
	gap: var(--iddd-item-media-gap, 14px);
}
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-link:hover,
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-link:focus-visible {
	background-color: var(--iddd-row-card-bg, transparent);
}
/* The drill chevron clutters card layouts; hide it by default. */
.iddd-menu--slide.iddd-rgrid .iddd-panel[data-panel-key="root"] .iddd-link .iddd-chevron {
	display: none;
}

/* Title position presets */
.iddd-menu--slide.iddd-rgrid-title-under .iddd-panel[data-panel-key="root"] .iddd-link {
	flex-direction: column;
	text-align: center;
}
.iddd-menu--slide.iddd-rgrid-title-next .iddd-panel[data-panel-key="root"] .iddd-link {
	flex-direction: row;
	text-align: start;
	justify-content: flex-start;
}
.iddd-menu--slide.iddd-rgrid-title-before .iddd-panel[data-panel-key="root"] .iddd-link {
	flex-direction: row-reverse;
	text-align: end;
	justify-content: flex-start;
}
.iddd-menu--slide.iddd-rgrid-title-none .iddd-panel[data-panel-key="root"] .iddd-link .iddd-link-text {
	display: none;
}

/* Sub-panel scoped overrides (only apply inside non-root panels). */
.iddd-menu--slide .iddd-panel:not([data-panel-key="root"]) {
	background: var(--iddd-sub-bg);
}
/* Multi-column grid for submenu items. With cols=1 it behaves like a vertical list. */
.iddd-menu--slide .iddd-panel:not([data-panel-key="root"]) .iddd-list {
	display: grid;
	grid-template-columns: repeat(var(--iddd-sub-cols, 1), minmax(0, 1fr));
	column-gap: var(--iddd-sub-col-gap, 0px);
	row-gap: var(--iddd-sub-row-gap, 0px);
}
.iddd-menu--slide .iddd-panel:not([data-panel-key="root"]) .iddd-list-item::after {
	background: var(--iddd-sub-border);
	height: var(--iddd-sub-bw);
}
.iddd-menu--slide .iddd-panel:not([data-panel-key="root"]) .iddd-list-item .iddd-link {
	padding: var(--iddd-sub-py) var(--iddd-sub-px);
	color: var(--iddd-sub-fg);
	font-size: var(--iddd-sub-fs);
}
.iddd-menu--slide .iddd-panel:not([data-panel-key="root"]) .iddd-list-item .iddd-link:hover,
.iddd-menu--slide .iddd-panel:not([data-panel-key="root"]) .iddd-list-item .iddd-link:focus-visible {
	color: var(--iddd-sub-fg-hover);
}

/* Submenu row border position presets. */
.iddd-menu--slide.iddd-sborder-padding .iddd-panel:not([data-panel-key="root"]) .iddd-list-item::after {
	inset-inline-start: var(--iddd-sub-px);
	inset-inline-end: var(--iddd-sub-px);
}
.iddd-menu--slide.iddd-sborder-full .iddd-panel:not([data-panel-key="root"]) .iddd-list-item::after {
	inset-inline-start: 0;
	inset-inline-end: 0;
}
.iddd-menu--slide.iddd-sborder-custom .iddd-panel:not([data-panel-key="root"]) .iddd-list-item::after {
	inset-inline-start: var(--iddd-sub-bos);
	inset-inline-end: var(--iddd-sub-boe);
}

/* Parent-of-current-submenu row (selectable). */
.iddd-menu--slide .iddd-link--parent {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--iddd-item-media-gap);
	padding: var(--iddd-sub-py) var(--iddd-sub-px);
	background: var(--iddd-parent-bg);
	color: var(--iddd-parent-fg);
	font-size: var(--iddd-parent-fs);
	font-weight: var(--iddd-parent-fw);
	letter-spacing: .02em;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.iddd-menu--slide .iddd-link--parent:hover,
.iddd-menu--slide .iddd-link--parent:focus-visible {
	color: var(--iddd-sub-fg-hover);
	background-color: var(--iddd-menu-row-hover-bg);
	outline: none;
}
.iddd-menu--slide .iddd-link--parent::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: var(--iddd-parent-bw);
	background: var(--iddd-parent-bc);
	pointer-events: none;
	inset-inline-start: 0;
	inset-inline-end: 0;
}
/* Parent border position presets (use offsets for full directional control). */
.iddd-menu--slide.iddd-pborder-padding .iddd-link--parent::after {
	inset-inline-start: var(--iddd-sub-px);
	inset-inline-end: var(--iddd-sub-px);
}
.iddd-menu--slide.iddd-pborder-full .iddd-link--parent::after {
	inset-inline-start: 0;
	inset-inline-end: 0;
}
.iddd-menu--slide.iddd-pborder-custom .iddd-link--parent::after {
	inset-inline-start: var(--iddd-parent-bos);
	inset-inline-end: var(--iddd-parent-boe);
}

/* — Item-entrance animations (apply to the active panel only) — */
.iddd-menu--slide .iddd-list-item,
.iddd-menu--slide .iddd-link--parent {
	will-change: transform, opacity;
}

/* Initial hidden state — only when an animation mode is requested.
   The "reveal" mode handles its own initial state via clip-path so it must NOT start at opacity 0. */
.iddd-menu--slide[data-iddd-anim]:not([data-iddd-anim="none"]):not([data-iddd-anim="reveal"]) .iddd-panel--active .iddd-list-item,
.iddd-menu--slide[data-iddd-anim]:not([data-iddd-anim="none"]):not([data-iddd-anim="reveal"]) .iddd-panel--active .iddd-link--parent {
	opacity: 0;
}
.iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active .iddd-link--parent {
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
}
[dir="rtl"] .iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active .iddd-list-item,
[dir="rtl"] .iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active .iddd-link--parent {
	clip-path: inset(0 0 0 100%);
	-webkit-clip-path: inset(0 0 0 100%);
}

/* Run the keyframes when the panel has been marked. JS toggles `iddd-anim-run`
   each time a panel becomes active so the animation re-plays on every drill/back. */
.iddd-menu--slide[data-iddd-anim]:not([data-iddd-anim="none"]) .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim]:not([data-iddd-anim="none"]) .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-duration: var(--iddd-anim-dur);
	animation-timing-function: var(--iddd-anim-ease);
	animation-fill-mode: both;
}
/* Per-mode keyframe selection (side rule lives further down so it can be overridden). */
.iddd-menu--slide[data-iddd-anim="up"]     .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="up"]     .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-up; }
.iddd-menu--slide[data-iddd-anim="down"]   .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="down"]   .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-down; }
.iddd-menu--slide[data-iddd-anim="fade"]   .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="fade"]   .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-fade; }
.iddd-menu--slide[data-iddd-anim="blur"]   .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="blur"]   .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-blur; }
.iddd-menu--slide[data-iddd-anim="scale"]  .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="scale"]  .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-scale; }
.iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-reveal; }
[dir="rtl"] .iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
[dir="rtl"] .iddd-menu--slide[data-iddd-anim="reveal"] .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-reveal-rtl; }
.iddd-menu--slide[data-iddd-anim="flip"]   .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="flip"]   .iddd-panel--active.iddd-anim-run .iddd-link--parent { animation-name: iddd-anim-flip; transform-origin: 50% 0; }
.iddd-menu--slide[data-iddd-anim="spring"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="spring"] .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-name: iddd-anim-spring;
	animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

/* Stagger mode: delay each row by --idx * --iddd-anim-stagger.
   Parent row uses idx -1 effectively by leading at 0, list items follow with their own --idx. */
.iddd-menu--slide[data-iddd-anim-mode="stagger"] .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-delay: 0ms;
}
.iddd-menu--slide[data-iddd-anim-mode="stagger"] .iddd-panel--active.iddd-anim-run .iddd-list-item {
	animation-delay: calc((var(--idx, 0) + 1) * var(--iddd-anim-stagger));
}
/* "All" mode: everyone shares the same delay (0). */
.iddd-menu--slide[data-iddd-anim-mode="all"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim-mode="all"] .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-delay: 0ms;
}

/* Root-level start delay: prefixes every other delay calculation, but ONLY
   on the first-level (root) panel. Higher specificity (extra [data-panel-key="root"])
   overrides the generic stagger / all rules above. */
.iddd-menu--slide[data-iddd-anim-mode="stagger"] .iddd-panel[data-panel-key="root"].iddd-anim-run .iddd-list-item {
	animation-delay: calc(var(--iddd-anim-root-delay, 0ms) + (var(--idx, 0) + 1) * var(--iddd-anim-stagger));
}
.iddd-menu--slide[data-iddd-anim-mode="all"] .iddd-panel[data-panel-key="root"].iddd-anim-run .iddd-list-item {
	animation-delay: var(--iddd-anim-root-delay, 0ms);
}

/* Once the menu has been shown at least once (JS adds .iddd-anim-warm), drop
   the root-level delay on every subsequent replay so it remains a one-shot. */
.iddd-menu--slide.iddd-anim-warm[data-iddd-anim-mode="stagger"] .iddd-panel[data-panel-key="root"].iddd-anim-run .iddd-list-item {
	animation-delay: calc((var(--idx, 0) + 1) * var(--iddd-anim-stagger));
}
.iddd-menu--slide.iddd-anim-warm[data-iddd-anim-mode="all"] .iddd-panel[data-panel-key="root"].iddd-anim-run .iddd-list-item {
	animation-delay: 0ms;
}

/* "side" — origin is on the right (positive translateX) by default; in RTL it flips
   so it travels in the same direction as the panel slide. Explicit overrides via the
   "iddd-anim-side-from-right" / "iddd-anim-side-from-left" classes lock it regardless of dir. */
@keyframes iddd-anim-from-right {
	from { opacity: 0; transform: translateX(var(--iddd-anim-dist, 18px)); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes iddd-anim-from-left {
	from { opacity: 0; transform: translateX(calc(var(--iddd-anim-dist, 18px) * -1)); }
	to   { opacity: 1; transform: translateX(0); }
}

/* AUTO (default): from right on LTR, flipped to from left on RTL. */
.iddd-menu--slide[data-iddd-anim="side"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide[data-iddd-anim="side"] .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-name: iddd-anim-from-right;
}
[dir="rtl"] .iddd-menu--slide[data-iddd-anim="side"]:not(.iddd-anim-side-from-right):not(.iddd-anim-side-from-left) .iddd-panel--active.iddd-anim-run .iddd-list-item,
[dir="rtl"] .iddd-menu--slide[data-iddd-anim="side"]:not(.iddd-anim-side-from-right):not(.iddd-anim-side-from-left) .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-name: iddd-anim-from-left;
}

/* EXPLICIT: from right (right→left motion) — overrides RTL flip. */
.iddd-menu--slide.iddd-anim-side-from-right[data-iddd-anim="side"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide.iddd-anim-side-from-right[data-iddd-anim="side"] .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-name: iddd-anim-from-right;
}
/* EXPLICIT: from left (left→right motion). */
.iddd-menu--slide.iddd-anim-side-from-left[data-iddd-anim="side"] .iddd-panel--active.iddd-anim-run .iddd-list-item,
.iddd-menu--slide.iddd-anim-side-from-left[data-iddd-anim="side"] .iddd-panel--active.iddd-anim-run .iddd-link--parent {
	animation-name: iddd-anim-from-left;
}
@keyframes iddd-anim-up {
	from { opacity: 0; transform: translateY(var(--iddd-anim-dist, 18px)); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes iddd-anim-down {
	from { opacity: 0; transform: translateY(calc(var(--iddd-anim-dist, 18px) * -1)); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes iddd-anim-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* — Modern, trend-aware animations — */

/* Blur In — popularised by visionOS / iOS / Apple onboarding sequences. */
@keyframes iddd-anim-blur {
	from { opacity: 0; filter: blur(10px); transform: translateY(6px); }
	to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

/* Scale Pop — playful but understated. */
@keyframes iddd-anim-scale {
	from { opacity: 0; transform: scale(.86); }
	to   { opacity: 1; transform: scale(1); }
}

/* Clip-path Reveal — material-style mask reveal from the start edge. */
@keyframes iddd-anim-reveal {
	from { opacity: 1; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}
/* RTL mirror so the reveal still flows from the start edge of the reading direction. */
@keyframes iddd-anim-reveal-rtl {
	from { opacity: 1; clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); }
	to   { opacity: 1; clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}

/* 3D Flip from above — perspective-based, very modern feel. */
@keyframes iddd-anim-flip {
	from { opacity: 0; transform: perspective(720px) rotateX(-65deg) translateY(-12px); }
	to   { opacity: 1; transform: perspective(720px) rotateX(0deg)   translateY(0); }
}

/* Spring (overshoot) — uses a bouncy timing function set per-rule. */
@keyframes iddd-anim-spring {
	0%   { opacity: 0; transform: translateY(var(--iddd-anim-dist, 18px)) scale(.92); }
	60%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.iddd-menu--slide .iddd-panel--active.iddd-anim-run .iddd-list-item,
	.iddd-menu--slide .iddd-panel--active.iddd-anim-run .iddd-link--parent {
		animation: none !important;
		opacity: 1 !important;
	}
}
.iddd-menu--slide .iddd-link-text {
	flex: 1;
	min-width: 0;
}

/* — Item media (icon / category image) — */
.iddd-menu--slide .iddd-item-media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	background: transparent;
}
.iddd-menu--slide .iddd-item-media--icon {
	width: var(--iddd-item-icon-size);
	height: var(--iddd-item-icon-size);
	border-radius: var(--iddd-item-icon-radius);
}
.iddd-menu--slide .iddd-item-media--image {
	width: var(--iddd-item-image-size);
	height: var(--iddd-item-image-size);
	border-radius: var(--iddd-item-image-radius);
	background-color: #f5f5f5;
}
.iddd-menu--slide .iddd-item-icon,
.iddd-menu--slide .iddd-item-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--iddd-item-image-fit);
	object-position: center;
	pointer-events: none;
}
.iddd-menu--slide .iddd-item-media--icon .iddd-item-icon {
	object-fit: contain;
}

.iddd-menu--slide .iddd-chevron {
	width: var(--iddd-indicator-size);
	height: var(--iddd-indicator-size);
	color: var(--iddd-indicator-color);
	transition: transform .25s ease, color .15s ease;
}
.iddd-menu--slide .iddd-chevron--dot {
	width: calc(var(--iddd-indicator-size) * .55);
	height: calc(var(--iddd-indicator-size) * .55);
}
.iddd-menu--slide .iddd-link:hover .iddd-chevron {
	color: var(--iddd-menu-fg-hover);
	transform: translateX(2px);
}
.iddd-menu--slide .iddd-link:hover .iddd-chevron--dot,
.iddd-menu--slide .iddd-link:hover .iddd-chevron--plus {
	transform: none;
}
[dir="rtl"] .iddd-menu--slide .iddd-link:hover .iddd-chevron {
	transform: translateX(-2px);
}
[dir="rtl"] .iddd-menu--slide .iddd-link:hover .iddd-chevron--dot,
[dir="rtl"] .iddd-menu--slide .iddd-link:hover .iddd-chevron--plus {
	transform: none;
}

/* Empty state */
.iddd-menu--empty {
	padding: 1.25rem;
	background: #fff;
	border: 1px dashed #d1d5db;
	color: #6b7280;
	text-align: center;
	font-size: 13px;
	direction: rtl;
}