/* نوار چسبانِ پایینِ موبایل (3.50.0، ظاهرِ تنظیمی از 3.53.0). همهٔ قاعده‌ها زیرِ ریشهٔ .dmdock.
   هر رنگ و اندازه یک نقش‌توکنِ `--dmdock-*` با پیش‌فرضِ پالتِ خانه (#fff، #111، خاکستری‌ها، #2563eb، #0f172a) است؛
   تنظیماتِ افزونه و قالب با عوضِ کردنِ همین توکن‌ها ظاهر را می‌سازند (+SKINNABLE).
   قاعدهٔ پنهان‌شدن در عرضِ بالا از PHP چاپ می‌شود، چون نقطهٔ شکست تنظیمی است. */

.dmdock {
  box-sizing: border-box;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 150;
  direction: rtl;
  text-align: center;
  background: var(--dmdock-surface, #ffffff);
  color: var(--dmdock-ink, #0f172a);
  border-block-start: var(--dmdock-border-width, 1px) var(--dmdock-border-style, solid) var(--dmdock-line, #e2e8f0);
  /* 3.59.0: هر گوشه جدا (بالا، راست، پایین، چپ مثلِ المنتور)؛ خالی ⇒ شعاعِ واحدِ قبلی. */
  border-radius: var(--dmdock-radius-t, var(--dmdock-radius, 0)) var(--dmdock-radius-r, var(--dmdock-radius, 0)) var(--dmdock-radius-b, var(--dmdock-radius, 0)) var(--dmdock-radius-l, var(--dmdock-radius, 0));
  box-shadow: var(--dmdock-shadow, none);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--dmmega-font, inherit);
}
.dmdock *,
.dmdock *::before,
.dmdock *::after { box-sizing: inherit; }

/* کیبوردِ گوشی باز است (JS کلاس را می‌گذارد): نوار پنهان می‌شود تا روی کیبورد و فیلد نیفتد. */
.dmdock.is-kb { display: none; }

/* شناور: نوار با فاصله از لبه‌ها، همهٔ چهار طرفِ حاشیه و شعاعِ گوشه. */
.dmdock--float {
  inset-inline: var(--dmdock-float-gap, 10px);
  bottom: calc(var(--dmdock-float-gap, 10px) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 0;
  border: var(--dmdock-border-width, 1px) var(--dmdock-border-style, solid) var(--dmdock-line, #e2e8f0);
  border-radius: var(--dmdock-radius-t, var(--dmdock-radius, 18px)) var(--dmdock-radius-r, var(--dmdock-radius, 18px)) var(--dmdock-radius-b, var(--dmdock-radius, 18px)) var(--dmdock-radius-l, var(--dmdock-radius, 18px));
}

/* شیشه‌ای: زمینهٔ نیمه‌شفاف (از رنگِ زمینه با آلفا، یا پیش‌فرضِ سفیدِ ۷۲٪) و تاریِ پس‌زمینه. مرورگرِ بی‌پشتیبانی همان
   زمینهٔ ساده را می‌گیرد، پس هرگز شفافیتِ خراب نمی‌ماند. */
.dmdock--glass { background: var(--dmdock-surface, rgba(255, 255, 255, 0.72)); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dmdock--glass {
    -webkit-backdrop-filter: blur(var(--dmdock-glass-blur, 14px)) saturate(1.4);
    backdrop-filter: blur(var(--dmdock-glass-blur, 14px)) saturate(1.4);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dmdock--glass { background: var(--dmdock-surface-solid, #ffffff); }
}

.dmdock__list {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dmdock__cell { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }

.dmdock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--dmdock-height, 56px);
  padding: 6px 4px;
  color: inherit;
  text-decoration: none;
  font-size: var(--dmdock-label-size, 12px);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
/* 3.60.1: «دسته‌بندی» پس از بستنِ منو زمینه و متنِ فعال را نگه می‌داشت: خانهٔ دکمه‌ای بعد از ضربه فوکوس می‌ماند و
   :focus/:active قالب (Elementor، Hello، ‎[type=button]‎) زمینه و رنگِ خودش را می‌داد؛ آیکن چون رنگِ خودش را داشت برمی‌گشت.
   خانهٔ غیرفعال در فوکوس و فشار همان حالتِ عادی است (۰-۳-۰ بر قالب می‌چربد). */
.dmdock .dmdock__item:not(.is-active):not(.is-hover),
.dmdock .dmdock__item:not(.is-active):not(.is-hover):is(:focus, :active) { color: var(--dmdock-ink, inherit); background: transparent; box-shadow: none; }
@media (hover: hover) {
  .dmdock .dmdock__item:not(.is-active):hover { color: var(--dmdock-hover-ink, var(--dmdock-ink, #0f172a)); background: var(--dmdock-hover-bg, transparent); }
}
.dmdock__item:focus-visible { outline: 2px solid var(--dmdock-active, #2563eb); outline-offset: -3px; border-radius: 8px; }

/* هاور (و لمسِ طولانی): هر ویژگیِ حالتِ عادی هاور هم دارد و هاورِ خالی به همان مقدارِ عادی برمی‌گردد. `.is-hover` برای
   پیش‌نمایشِ صفحهٔ تنظیمات است که هاور را بدونِ ماوس نشان می‌دهد. */
@media (hover: hover) {
  .dmdock__item:hover { color: var(--dmdock-hover-ink, var(--dmdock-ink, #0f172a)); background: var(--dmdock-hover-bg, transparent); }
}
.dmdock__item.is-hover { color: var(--dmdock-hover-ink, var(--dmdock-ink, #0f172a)); background: var(--dmdock-hover-bg, transparent); }
/* 3.59.1: فعالِ خالی از هاور می‌خواند (متن از متنِ هاور، آیکن از آیکنِ هاور)، بعد پیش‌فرض. */
.dmdock__item.is-active { color: var(--dmdock-active, var(--dmdock-hover-ink, #2563eb)); background: var(--dmdock-active-bg, transparent); font-weight: 700; }
/* 3.59.0: رنگِ آیکن جدا از متن، در حالتِ عادی و هاور؛ خالی ⇒ همان رنگِ متنِ همان حالت (رفتارِ قبلی). خانهٔ فعال هر دو را
   با «رنگِ خانهٔ فعال» می‌گیرد. آیکن‌های SVG با currentColor رنگ می‌گیرند. */
.dmdock__item .dmdock__icon { color: var(--dmdock-icon, inherit); }
@media (hover: hover) {
  .dmdock__item:hover .dmdock__icon { color: var(--dmdock-hover-icon, var(--dmdock-hover-ink, var(--dmdock-icon, inherit))); }
}
.dmdock__item.is-hover .dmdock__icon { color: var(--dmdock-hover-icon, var(--dmdock-hover-ink, var(--dmdock-icon, inherit))); }
.dmdock__item.is-active .dmdock__icon { color: var(--dmdock-active-icon, var(--dmdock-hover-icon, var(--dmdock-active, var(--dmdock-hover-ink, #2563eb)))); }

/* آیکن با قابِ اندازهٔ تنظیمی. پس‌زمینهٔ هر آیکن (رنگ، شعاع، اندازه) هر خانه جدا از --dmdock-ibg* می‌آید. */
.dmdock__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 3.59.0: فاصلهٔ داخلی (--dmdock-ibg-pad): قاب بی‌اندازهٔ تنظیمی خودش آیکن + دو برابرِ فاصله می‌شود؛ قابِ اندازه‌دار
     همان اندازه می‌ماند و آیکن داخلش کوچک‌تر می‌شود. */
  box-sizing: border-box;
  padding: var(--dmdock-ibg-pad, 0px);
  width: var(--dmdock-ibg-size, calc(var(--dmdock-icon-size, 24px) + 2 * var(--dmdock-ibg-pad, 0px)));
  height: var(--dmdock-ibg-size, calc(var(--dmdock-icon-size, 24px) + 2 * var(--dmdock-ibg-pad, 0px)));
  border-radius: var(--dmdock-ibg-radius, 12px);
  background: var(--dmdock-ibg, transparent);
}
/* 3.60.1: هاورِ قابِ آیکن فقط روی دستگاهِ ماوس‌دار؛ روی لمس :hover پس از ضربه می‌چسبید. */
@media (hover: hover) {
  .dmdock__item:hover .dmdock__icon { background: var(--dmdock-ibg-hover, var(--dmdock-ibg, transparent)); }
}
.dmdock__item.is-hover .dmdock__icon { background: var(--dmdock-ibg-hover, var(--dmdock-ibg, transparent)); }
.dmdock__item.is-active .dmdock__icon { background: var(--dmdock-ibg-active, var(--dmdock-ibg, transparent)); }
.dmdock__icon svg { width: var(--dmdock-icon-size, 24px); height: var(--dmdock-icon-size, 24px); max-width: 100%; max-height: 100%; flex-shrink: 0; }
.dmdock__icon img { display: block; width: var(--dmdock-icon-size, 24px); height: var(--dmdock-icon-size, 24px); max-width: 100%; max-height: 100%; object-fit: contain; flex-shrink: 0; }
.dmdock__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dmdock__badge {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--dmdock-badge-bg, #2563eb);
  color: var(--dmdock-badge-ink, #ffffff);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* خانه‌ای که خروجیِ یک افزونه (سبد، جستجو، ورود) یا شورت‌کد را نگه می‌دارد. (3.55.0) هر خانه یک‌شکل است: آیکن و متنِ
   خروجیِ افزونه هم به اندازهٔ آیکن و متنِ خودِ نوار برمی‌گردند، هر افزونه یا شورت‌کدی که باشد، و هیچ‌چیز از سلولش بیرون
   نمی‌زند (اسکرولِ افقی نمی‌سازد). انتخاب‌گرها عمداً وزنِ بالا دارند (۰-۳-۰ به بالا) چون CSSِ خودِ افزونه‌ها معمولاً
   ۰-۱-۰ تا ۰-۲-۰ است؛ بدونِ !important. */
.dmdock__cell { overflow: hidden; }
.dmdock__item--slot { cursor: default; max-width: 100%; }
.dmdock__slot { display: inline-flex; align-items: center; justify-content: center; min-height: var(--dmdock-icon-size, 24px); max-width: 100%; min-width: 0; }
/* 3.60.3: «modal»/«sheet» فقط پنجره است، نه دکمه/پیوندِ بازکنندهٔ آن: دکمهٔ جستجو کلاسِ js-dms-modal-open دارد و کلِ دکمه و برچسبش از یک‌دست‌سازی (فونت و اندازه) بیرون می‌افتاد. */
/* ⚠ 3.60.0: یک‌دست‌سازی فقط تا دکمهٔ خانه می‌رسد، نه به منوی کشویی/مودالی که افزونه کنارِ دکمه چاپ می‌کند (مثلاً منوی
   حسابِ dm-login): «*»ِ بی‌مرز آن منو را ۱۲ پیکسلیِ یک‌خطی می‌کرد. «پنجره» = ul/ol، role=menu/dialog، یا کلاسی با -menu/modal/sheet
   (نه «-dd»: خودِ دکمهٔ حسابِ dm-login و ظرفش آن را دارند). */
.dmdock .dmdock__item--slot .dmdock__slot *:where(:not(:is(ul, ol, [role="menu"], [role="dialog"], [class*="-menu"], [class*="modal"]:not(button, a), [class*="sheet"]:not(button, a), i, [class*="dashicons"], [class*="fa-"], [class*="icon-font"]), .dmdock__slot :is(ul, ol, [role="menu"], [role="dialog"], [class*="-menu"], [class*="modal"]:not(button, a), [class*="sheet"]:not(button, a)) *)) {
  box-sizing: border-box;
  /* ⚠ 3.60.0: بدونِ max-width:100% — روی ظرفِ بلوکیِ داخلِ flex (مثلِ .dml-btn-wrap) درصدِ چرخه‌ای می‌ساخت و دکمهٔ حساب
     به ۰×۰ جمع می‌شد. جلوی سرریز را خودِ سلول (.dmdock__cell overflow:hidden) و max-width روی .dmdock__slot می‌گیرد. */
  font-size: var(--dmdock-label-size, 12px);
  font-family: var(--dmmega-font, inherit); /* 3.60.2: صریح، نه inherit — دکمه/ظرفِ افزونه یا قالب در میانه فونتِ دیگری می‌گذاشت و برچسب (مثلاً «جستجو») فونتِ مگامنو را نمی‌گرفت. */
  font-weight: inherit;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
/* دکمه/پیوندِ افزونه = همان قابِ آیکنِ خانه‌های ساده: پس‌زمینه، فاصلهٔ داخلی، گردی و اندازهٔ تنظیمی (--dmdock-ibg-*). */
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a):where(:not(.dmdock__slot :is(ul, ol, [role="menu"], [role="dialog"], [class*="-menu"], [class*="modal"]:not(button, a), [class*="sheet"]:not(button, a)) *)) {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-shadow: none; border: 0; margin: 0; cursor: pointer;
  width: auto; height: auto; min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent; /* 3.60.1: پس‌زمینه روی خودِ آیکن است، نه روی دکمه و برچسبش (پایین) */
  color: var(--dmdock-icon, inherit);
  text-decoration: none;
}
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a):hover,
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a):focus {
  background: transparent; color: var(--dmdock-icon, inherit); /* 3.60.4: فوکوس رنگ را عوض نمی‌کند — بعد از بستنِ منو فوکوس روی دکمه می‌ماند و آیکن سفیدِ هاور می‌ماند */
  /* ⚠ هاورِ خودِ افزونه (مثلاً dm-login، ۰-۴-۰) فاصله و قابِ ۴۴ پیکسلی را برمی‌گرداند و آیکن در لمس می‌پرید. */
  padding: 0; width: auto; height: auto; border: 0; box-shadow: none; transform: none;
}
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a):focus-visible { outline: 2px solid var(--dmdock-active, #2563eb); outline-offset: 2px; }
/* اندازهٔ قابِ تنظیمی (۰ = خودکار) */
.dmdock [data-dmdock-item] .dmdock__slot :is(button, a) { min-width: var(--dmdock-ibg-size, 0px); min-height: var(--dmdock-ibg-size, 0px); }
/* 3.60.1: قابِ آیکنِ خانهٔ افزونه (زمینه، فاصلهٔ داخلی، گردی) فقط دورِ خودِ آیکن، مثلِ خانه‌های ساده؛ برچسبِ افزونه بیرونِ آن. */
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a) :is(svg, img, i, [class*="dashicons"], [class*="fa-"]) {
  box-sizing: content-box;
  padding: var(--dmdock-ibg-pad, 0px);
  border-radius: var(--dmdock-ibg-radius, 12px);
  background: var(--dmdock-ibg, transparent);
}
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a) :is(svg, img, i, [class*="dashicons"], [class*="fa-"]) :is(svg, img) { padding: 0; background: none; }
@media (hover: hover) {
  .dmdock .dmdock__item--slot .dmdock__slot :is(button, a):hover :is(svg, img, i, [class*="dashicons"], [class*="fa-"]) { background: var(--dmdock-ibg-hover, var(--dmdock-ibg, transparent)); }
}
/* 3.60.4: هاور فقط روی دستگاهِ ماوس‌دار؛ «باز» (aria-expanded=true، مثلاً منوی حساب) = حالتِ فعال: رنگ و زمینهٔ آیکنِ فعال.
   پیش‌تر کلیک فقط رنگِ هاور را از :focus می‌گرفت، زمینه همان عادی می‌ماند و پس از بستن هم رنگِ هاور می‌ماند. */
@media (hover: hover) {
  .dmdock .dmdock__item--slot .dmdock__slot :is(button, a):hover { color: var(--dmdock-hover-icon, var(--dmdock-hover-ink, var(--dmdock-icon, inherit))); }
}
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a)[aria-expanded="true"] { color: var(--dmdock-active-icon, var(--dmdock-hover-icon, var(--dmdock-active, var(--dmdock-hover-ink, #2563eb)))); }
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a)[aria-expanded="true"] :is(svg, img, i, [class*="dashicons"], [class*="fa-"]) { background: var(--dmdock-ibg-active, var(--dmdock-ibg-hover, var(--dmdock-ibg, transparent))); }
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a) svg,
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a) img {
  flex: 0 0 auto;
  display: block;
  width: var(--dmdock-icon-size, 24px);
  height: var(--dmdock-icon-size, 24px);
  max-width: none;
  object-fit: contain;
  overflow: visible;
}
/* آیکنِ فونتی (i، dashicons، Font Awesome) هم به اندازهٔ آیکن. */
.dmdock .dmdock__item--slot .dmdock__slot :is(button, a) :is(i, [class*="dashicons"], [class*="fa-"]) {
  font-size: var(--dmdock-icon-size, 24px);
  width: var(--dmdock-icon-size, 24px);
  height: var(--dmdock-icon-size, 24px);
  line-height: 1;
}
/* برچسبِ نوار روشن ⇒ متنِ داخلیِ دکمهٔ افزونه پنهان (دو متنِ هم‌معنی نشود)؛ شمارنده‌ها و متنِ صفحه‌خوان می‌مانند. */
.dmdock .dmdock__item--own-label .dmdock__slot :is(button, a) > :is(span, small, strong, em, b):not([class*="badge"]):not([class*="count"]):not(.screen-reader-text):not(.sr-only):not([class*="icon"]):not([class*="dashicons"]):not([class*="fa-"]):not(:has(svg, img, i, [class*="dashicons"])) {
  display: none;
}
/* شمارندهٔ سبد روی گوشهٔ آیکن. ⚠ فقط «badge»: «[class*=count]» آیکنِ حسابِ dm-login (dml-acCOUNT-icon) را هم می‌گرفت و
   مطلق‌جا و ریزش می‌کرد. */
.dmdock .dmdock__item--slot .dmdock__slot [class*="badge"] {
  position: absolute; top: -4px; inset-inline-start: 50%; margin-inline-start: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dmdock-badge-bg, #2563eb); color: var(--dmdock-badge-ink, #fff);
  font-size: 10px; line-height: 1; font-weight: 700;
}
.dmdock .dmdock__item--slot .dmdock__slot [class*="badge"]:empty { display: none; }
/* ظرف‌های میانیِ افزونه دورِ دکمه (div.dml-btn-wrap، div.dm-scm-trigger-wrapper…): بی‌خطِ متنی، تا برچسبِ هر خانه
   هم‌ترازِ بقیه بماند (بلوک یک خطِ متن دورِ دکمهٔ inline می‌ساخت و برچسبِ حساب ۵ پیکسل پایین‌تر می‌افتاد). */
.dmdock .dmdock__item--slot .dmdock__slot :is(div, span):has(> :is(button, a)) { display: flex; align-items: center; justify-content: center; line-height: 0; }
/* برچسبِ نوار و رنگِ متن در هاور، مثلِ خانه‌های ساده */
.dmdock__item--slot .dmdock__label { cursor: pointer; }
/* جا برای نوار تا انتهای صفحه زیرش نماند: ارتفاعِ اندازه‌گیری‌شدهٔ نوار (شامل فاصلهٔ شناور و ناحیهٔ امن) که JS در
   --dmdock-total می‌گذارد؛ پیش از اجرای JS یک تخمینِ امن. */
body.dmmega-dock-on { padding-block-end: var(--dmdock-total, calc(var(--dmdock-height, 56px) + 12px + env(safe-area-inset-bottom, 0px))); }

@media print { .dmdock { display: none; } body.dmmega-dock-on { padding-block-end: 0; } }