/* =========================================================
   قالب دوم — DM Gold (تیره/طلایی)
   ---------------------------------------------------------
   نسخه‌ی مستقلِ افزونه از سکشنِ «محصولات شگفت‌انگیز» قالب DM Gold.
   همه‌ی مقادیرِ رنگ/اندازه از CSS Variableهایی می‌آیند که
   Frontend::add_carousel_style_inline_css() از روی تنظیماتِ پیشخوان
   می‌سازد؛ مقادیرِ fallback اینجا دقیقاً برابر توکن‌های قالب DM Gold است
   تا حتی بدون تنظیمات هم خروجی همان طرح باشد.

   همه‌چیز زیر .dmao-dmgold اسکوپ شده تا با استایلِ قالبِ میزبان قاطی نشود.
   ========================================================= */

.dmao-dmgold {
  --dmg-section-bg-1: #3a1414;
  --dmg-section-bg-2: #211f1c;
  --dmg-section-padding: 24px;
  --dmg-kicker-color: #ff8a6e;
  --dmg-title-color: #f8f4f4;
  --dmg-hint-color: #bab6b6;
  --dmg-card-bg: #444141;
  --dmg-card-border: #ff8a6e;
  --dmg-card-border-hover: #ff8a6e;
  --dmg-card-radius: 14px;
  --dmg-card-width: 230px;
  --dmg-name-color: #f8f4f4;
  --dmg-name-font-size: 14.5px;
  --dmg-timer-color: #ff8a6e;
  --dmg-timer-font-size: 12px;
  --dmg-sold-bar-1: #ff8a6e;
  --dmg-sold-bar-2: #b23b2f;
  --dmg-sold-label-color: #bab6b6;
  --dmg-price-color: #f8f4f4;
  --dmg-price-font-size: 16px;
  --dmg-price-old-color: #9b9797;
  --dmg-toman-color: #9b9797;
  --dmg-nav-icon-color: #f8f4f4;
  --dmg-nav-border-color: #bab6b6;

  padding: var(--dmg-section-padding) 0;
  background: radial-gradient(120% 160% at 100% 0%, var(--dmg-section-bg-1) 0%, var(--dmg-section-bg-2) 55%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  direction: rtl;
}

.dmao-dmgold *,
.dmao-dmgold *::before,
.dmao-dmgold *::after { box-sizing: border-box; }

.dmao-dmgold-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- سربرگ ---------- */
.dmao-dmgold-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.dmao-dmgold-head-aside {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dmao-dmgold-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--dmg-kicker-color);
  margin-bottom: 6px;
}

.dmao-dmgold-kicker svg { width: 14px; height: 14px; flex: none; }

.dmao-dmgold-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--dmg-title-color);
}

.dmao-dmgold-hint { font-size: 13px; color: var(--dmg-hint-color); }

/* ---------- فلش‌های ناوبری ---------- */
.dmao-dmgold-nav { display: flex; gap: 8px; }

.dmao-dmgold-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--dmg-nav-border-color) 35%, transparent);
  color: var(--dmg-nav-icon-color);
  transition: background .18s, border-color .18s, opacity .18s;
}

.dmao-dmgold-btn:hover {
  background: color-mix(in srgb, var(--dmg-nav-icon-color) 10%, transparent);
  border-color: var(--dmg-kicker-color);
}

.dmao-dmgold-btn svg { width: 17px; height: 17px; }
.dmao-dmgold-btn[disabled] { opacity: .35; cursor: default; }

/* ---------- ریل کاروسل ---------- */
.dmao-dmgold-carousel { position: relative; padding-top: 10px; margin-top: -10px; }

.dmao-dmgold-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;

  /* ⚠ همان ضامنِ .category-filters (توضیحِ کاملش در dm-amazing-offers-public.css):
     کارت‌های این ریل flex:0 0 auto با عرضِ ثابت‌اند، پس min-content این نوار برابرِ
     مجموعِ همهٔ کارت‌هاست و تا والدها منتشر می‌شود. اگر قالبِ میزبان جایی یک آیتمِ
     فلکس/گرید با min-width:auto داشته باشد، آن آیتم به همان اندازه باز می‌شود و
     عرضِ کلِ صفحه می‌شکند. contain:inline-size این انتشار را قطع می‌کند؛ اسکرولِ
     افقیِ خودِ ریل دست‌نخورده می‌مانَد. */
  min-width: 0;
  contain: inline-size;
}

.dmao-dmgold-track::-webkit-scrollbar { display: none; }

.dmao-dmgold-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: var(--dmg-card-width);
}

/* ---------- کارت ---------- */
.dmao-dmgold-card {
  position: relative;
  background: var(--dmg-card-bg);
  border: 1px solid color-mix(in srgb, var(--dmg-card-border) 25%, transparent);
  border-radius: var(--dmg-card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s, border-color .25s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.dmao-dmgold-card:hover {
  transform: translateY(-5px);
  border-color: var(--dmg-card-border-hover);
  text-decoration: none;
}

/* ---------- حالتِ «تمام شد» ---------- */
/* قبلاً این کارت هیچ زبانِ بصری‌ای برای تمام‌شدن (چه زمان، چه سهمیه) نداشت.
   رنگ‌بندی از همان توکن‌های تیره/طلاییِ خودِ این قالب می‌آید، نه کپیِ overlayِ
   کارتِ کلاسیک (که پالتِ روشن دارد و اینجا ناهماهنگ می‌شد). */
.dmao-dmgold-card--finished { cursor: default; }

/* کارتِ «پیشنهاد روز» داخلِ کاروسلِ خودِ قالب می‌نشیند و کلاسِ ریشه‌اش مالِ قالب
   است (.deal-card)، نه ما. پوششِ تمام‌شدن با inset:0 مطلق است و به یک والدِ
   position‌دار نیاز دارد؛ نمی‌شود فرض کرد قالب آن را داده — این کلاسِ پیشونددارِ
   خودمان تضمینش می‌کند. */
.dmao-dmgold-daily-card { position: relative; }

.dmao-dmgold-card--finished:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--dmg-card-border) 25%, transparent);
}

.dmao-dmgold-finished-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--dmg-section-bg-2, #211f1c) 72%, transparent);
  backdrop-filter: grayscale(60%);
}

.dmao-dmgold-finished-badge {
  background: color-mix(in srgb, var(--dmg-kicker-color) 85%, #000);
  color: var(--dmg-title-color, #f8f4f4);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 22px;
  border-radius: 999px;
  transform: rotate(-12deg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.dmao-dmgold-img {
  margin: 0;
  flex: none;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--dmg-card-bg) 70%, #000);
}

.dmao-dmgold-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dmao-dmgold-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
}

.dmao-dmgold-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.dmao-dmgold-name {
  font-size: var(--dmg-name-font-size);
  font-weight: 500;
  color: var(--dmg-name-color);
  margin: 4px 0 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- نوار موجودی ---------- */
.dmao-dmgold-sold { margin-bottom: 10px; }

.dmao-dmgold-sold-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(243, 242, 242, .14);
  overflow: hidden;
}

.dmao-dmgold-sold-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dmg-sold-bar-1), var(--dmg-sold-bar-2));
}

.dmao-dmgold-sold-lbl {
  font-size: 10.5px;
  color: var(--dmg-sold-label-color);
  margin-top: 5px;
}

/* ---------- تایمر ---------- */
.dmao-dmgold-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dmg-timer-color);
  font-size: var(--dmg-timer-font-size);
  font-weight: 700;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.dmao-dmgold-timer svg { width: 13px; height: 13px; flex: none; }

/* عددهای ساعت با عرضِ ثابت، تا با هر تیکِ ثانیه طولِ خط نلرزد. */
.dmao-dmgold-clock { font-variant-numeric: tabular-nums; }

/* ---------- قیمت ---------- */
.dmao-dmgold-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(243, 242, 242, .16);
}

.dmao-dmgold-price-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.dmao-dmgold-price-old {
  font-size: 11.5px;
  color: var(--dmg-price-old-color);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.dmao-dmgold-price {
  font-size: var(--dmg-price-font-size);
  font-weight: 700;
  color: var(--dmg-price-color);
  font-variant-numeric: tabular-nums;
}

.dmao-dmgold-toman { font-size: 11px; color: var(--dmg-toman-color); }

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
  .dmao-dmgold-wrap { padding: 0 16px; }
  .dmao-dmgold-title { font-size: 21px; }
  .dmao-dmgold-track > * { width: min(62vw, var(--dmg-card-width)); }
}

/* =========================================================
   اسلاید معرفی (اول) و اسلاید «مشاهده همه» (آخر)
   هر دو به صفحهٔ لندینگ لینک می‌شوند — معادلِ همان دو اسلایدِ
   قالب اول، ولی با طرحِ تیرهٔ همین قالب.
   ========================================================= */
.dmao-dmgold-poster,
.dmao-dmgold-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 22px 18px;
  border-radius: var(--dmg-card-radius);
  border: 1px dashed color-mix(in srgb, var(--dmg-kicker-color) 45%, transparent);
  background: color-mix(in srgb, var(--dmg-card-bg) 55%, transparent);
  color: var(--dmg-title-color);
  text-decoration: none;
  transition: border-color .25s, background .25s, transform .25s;
}

.dmao-dmgold-poster:hover,
.dmao-dmgold-end:hover {
  border-color: var(--dmg-kicker-color);
  background: color-mix(in srgb, var(--dmg-card-bg) 80%, transparent);
  transform: translateY(-5px);
  text-decoration: none;
  color: var(--dmg-title-color);
}

.dmao-dmgold-poster-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.dmao-dmgold-poster-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--dmg-title-color);
}

.dmao-dmgold-poster-cta,
.dmao-dmgold-end-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dmg-kicker-color);
  border: 1px solid color-mix(in srgb, var(--dmg-kicker-color) 55%, transparent);
}

.dmao-dmgold-poster-cta svg,
.dmao-dmgold-end-icon svg { width: 15px; height: 15px; }

.dmao-dmgold-end-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--dmg-kicker-color);
  border: 1px solid color-mix(in srgb, var(--dmg-kicker-color) 45%, transparent);
}

.dmao-dmgold-end-icon svg { width: 22px; height: 22px; }

/* =========================================================
   گریدِ لندینگ
   ---------------------------------------------------------
   عمداً گریدِ مستقلِ خودش را دارد و به Bootstrap تکیه نمی‌کند: مارک‌آپِ
   قدیمیِ لندینگ روی کلاس‌های row و row-cols و col سوار بود و افزونه هیچ CSSای برایشان
   نداشت، پس روی هر قالبی که Bootstrap لود نکند (از جمله DM Gold) گرید
   فرو می‌ریخت و کارت‌ها روی هم می‌افتادند.
   ========================================================= */
/* ⚠ نکتهٔ کلیدیِ اولویت‌بندی (چرا این سلکتورها دوتایی‌اند):
   المانِ لندینگ هر دو کلاسِ .dmao-dmgold و .dmao-dmgold-landing را با هم دارد.
   اگر اینجا فقط .dmao-dmgold-landing می‌نوشتیم، وزنش (0-1-0) دقیقاً برابرِ
   .dmao-dmgold می‌شد و برنده‌شدنش فقط به «ترتیبِ سورس» بند بود — چیزی که
   افزونه‌های ترکیب/فشرده‌سازیِ CSS (لایت‌اسپید) به‌راحتی جابه‌جا می‌کنند و
   همان باعث شد پس‌زمینه/پدینگِ لندینگ اعمال نشود.
   .dmao-dmgold.dmao-dmgold-landing وزنِ 0-2-0 دارد، پس مستقل از ترتیب برنده است.
   به همین دلیل هم به !important نیازی نیست.

   ضمناً متغیرها اینجا دوباره تعریف نمی‌شوند (فقط با fallbackِ درون var مصرف
   می‌شوند)، تا تنها منبعِ مقدار همان CSSِ درون‌خطیِ ساخته‌شده از تنظیمات باشد و
   دو جا سرِ یک متغیر رقابت نکنند. */
.dmao-dmgold.dmao-dmgold-landing {
  background: var(--dmg-landing-bg, transparent);
  padding:
    var(--dmg-landing-pad-top, 0px)
    var(--dmg-landing-pad-right, 0px)
    var(--dmg-landing-pad-bottom, 0px)
    var(--dmg-landing-pad-left, 0px);
  border-radius: var(--dmg-landing-radius, 0px);
}

.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-landing-grid {
  display: grid;
  grid-template-columns: repeat(var(--dmg-landing-cols, 4), minmax(0, 1fr));
  gap: var(--dmg-landing-gap, 18px);
  margin-top: 8px;
}

/* کارت داخل گرید عرضِ سلول را می‌گیرد (نه عرضِ ثابتِ اسلایدِ کاروسل) و
   رنگ/بوردر/گردیِ مخصوصِ لندینگ را. وزن 0-3-0 در برابر .dmao-dmgold-card (0-1-0). */
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-card {
  width: 100%;
  background: var(--dmg-landing-card-bg, #444141);
  border-color: color-mix(in srgb, var(--dmg-landing-card-border, #ff8a6e) 25%, transparent);
  border-radius: var(--dmg-landing-card-radius, 14px);
}

.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-card:hover {
  border-color: var(--dmg-landing-card-border, #ff8a6e);
}

/* اجزای داخلِ کارتِ لندینگ — رنگِ مستقل، تا وقتی پس‌زمینهٔ کارت را روشن
   می‌کنی متن‌ها ناخوانا نشوند. */
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-name { color: var(--dmg-landing-name-color, #f8f4f4); }
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-price { color: var(--dmg-landing-price-color, #f8f4f4); }
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-price-old { color: var(--dmg-landing-price-old-color, #9b9797); }
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-toman { color: var(--dmg-landing-toman-color, #9b9797); }
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-timer { color: var(--dmg-landing-timer-color, #ff8a6e); }
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-sold-lbl { color: var(--dmg-landing-sold-label-color, #bab6b6); }

.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-sold-bar {
  background: linear-gradient(90deg, var(--dmg-landing-sold-bar-1, #ff8a6e), var(--dmg-landing-sold-bar-2, #b23b2f));
}

/* خطِ جداکنندهٔ بالای ردیفِ قیمت روی کارتِ روشن دیده نمی‌شد؛ از رنگِ متنِ نام
   مشتق می‌شود تا با هر پس‌زمینه‌ای خودش را تطبیق دهد. */
.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-price-row {
  border-top-color: color-mix(in srgb, var(--dmg-landing-name-color, #f8f4f4) 18%, transparent);
}

.dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-sold-track {
  background: color-mix(in srgb, var(--dmg-landing-name-color, #f8f4f4) 14%, transparent);
}

@media (max-width: 1200px) {
  .dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-landing-grid {
    grid-template-columns: repeat(min(var(--dmg-landing-cols, 4), 3), minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-landing-grid {
    grid-template-columns: repeat(min(var(--dmg-landing-cols, 4), 2), minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .dmao-dmgold.dmao-dmgold-landing .dmao-dmgold-landing-grid {
    grid-template-columns: repeat(min(var(--dmg-landing-cols, 4), 2), minmax(0, 1fr));
    gap: 10px;
  }
}

/* =========================================================
   صفحه‌بندی پایین لندینگ
   ---------------------------------------------------------
   قالبِ اول یک بلوکِ <style> هاردکد با رنگ‌های روشنِ ثابت چاپ می‌کند؛ در
   این قالب آن بلوک اصلاً چاپ نمی‌شود (نه اینکه اینجا بازنویسی‌اش کنیم) تا
   جنگِ specificity پیش نیاید و همه‌چیز از تنظیمات بیاید.
   ========================================================= */
/* اینجا هم متغیرها فقط مصرف می‌شوند (با fallback) و دوباره تعریف نمی‌شوند،
   تا مقدارِ آمده از تنظیمات هیچ رقیبی نداشته باشد. */
.dmao-dmgold-pagination {
  display: flex;
  justify-content: center;
  margin: 32px 0 8px;
  direction: ltr;
}

.dmao-dmgold-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.dmao-dmgold-pagination .page-numbers li { margin: 0; }

.dmao-dmgold-pagination .page-numbers li a,
.dmao-dmgold-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dmg-pag-size, 38px);
  height: var(--dmg-pag-size, 38px);
  padding: 0 10px;
  background: var(--dmg-pag-bg, transparent);
  color: var(--dmg-pag-text, #f8f4f4);
  border: 1px solid color-mix(in srgb, var(--dmg-pag-border, #bab6b6) 35%, transparent);
  border-radius: var(--dmg-pag-radius, 8px);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: background .18s, border-color .18s, color .18s;
}

.dmao-dmgold-pagination .page-numbers li a:hover {
  background: var(--dmg-pag-hover-bg, #ffffff1a);
  border-color: var(--dmg-pag-border, #bab6b6);
  color: var(--dmg-pag-text, #f8f4f4);
  text-decoration: none;
}

.dmao-dmgold-pagination .page-numbers li span.current {
  background: var(--dmg-pag-active-bg, #ff8a6e);
  color: var(--dmg-pag-active-text, #211f1c);
  border-color: var(--dmg-pag-active-bg, #ff8a6e);
}