/**
 * ماژول Digin Product Tabs — استایل فرانت‌آفیس.
 *
 * ── چرا استایلِ محتوا هم این‌جاست ──────────────────────────────────────────────
 * بلوک‌های فروشگاه قدیمی دو خانوادهٔ نشانه‌گذاری داشتند: «جعبهٔ هشدار»
 * (`styled-box-notife*`) که CSS خود را به‌صورت یک تگ `<style>` داخل هر بلوک تکرار
 * می‌کرد، و «نشان‌های ضمانت» (`dk-trust-*`) که CSS آن اصلاً داخل بلوک نبود و در
 * فایل `custom_rtl.css` قالب قدیمی زندگی می‌کرد — یعنی با انتقال محتوا به سایت
 * تازه، همهٔ آن بلوک‌ها بدون استایل می‌شدند.
 *
 * هر دو مشکل با یک جا نگه‌داشتن استایل حل می‌شود: محتوا فقط نشانه‌گذاری معنایی
 * دارد، استایل این‌جاست، و ویرایش یک بلوک دیگر به معنی ویرایش CSS تکراری نیست.
 *
 * ── چرا شبکه `auto-fit` است و نه ستون ثابت ────────────────────────────────────
 * یک بلوک ممکن است در کارت خرید (≈۳۲۰px) یا در نوار تمام‌عرض پایین صفحه (≈۱۴۰۰px)
 * رندر شود. ستون ثابت یعنی یا در کارت سرریز می‌کند یا در نوار پهن به چهار سطر
 * کشیده و خالی می‌شود. `repeat(auto-fit, minmax(…))` خودش تصمیم می‌گیرد و به هیچ
 * media query یا کلاسِ وابسته به جایگاه نیاز ندارد.
 *
 * ── هماهنگی با قالب ───────────────────────────────────────────────────────────
 * رنگ‌ها و شعاع‌ها از توکن‌های Bootstrap قالب hummingbird خوانده می‌شوند و مقدار
 * پشتیبان دارند، پس فایل به‌تنهایی هم درست رندر می‌شود.
 *
 * ── RTL ───────────────────────────────────────────────────────────────────────
 * از خصوصیت‌های منطقی (`border-inline-start`, `padding-inline`) استفاده شده تا
 * بدون فایل RTL جداگانه، در هر دو جهت درست بیفتد.
 *
 * @license https://opensource.org/licenses/AFL-3.0
 */

.dpt-blocks {
  --dpt-radius: 0.75rem;
  --dpt-gap: 0.75rem;

  --dpt-info: #1f7fa8;
  --dpt-info-soft: #eaf6fb;
  --dpt-warning: #d97a06;
  --dpt-warning-soft: #fff5e6;
  --dpt-success: #1f8a54;
  --dpt-success-soft: #e9f9ee;
  --dpt-brand: var(--bs-primary, #ff580d);
  --dpt-brand-soft: #fdeaee;

  --dpt-surface: var(--bs-body-bg, #fff);
  --dpt-border: rgba(16, 24, 40, 0.1);
  --dpt-ink: var(--bs-body-color, #212529);
  --dpt-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.06);
  --dpt-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.1);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dpt-block__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dpt-ink);
}

/* خط تزئینی کوتاه پیش از عنوان بلوک تا از عنوان‌های خود قالب متمایز باشد. */
.dpt-block__title::before {
  flex: 0 0 auto;
  width: 0.25rem;
  height: 1.05em;
  content: '';
  background: var(--dpt-brand);
  border-radius: 99px;
}

.dpt-block__body > *:last-child {
  margin-bottom: 0;
}

/* ── فاصله‌گذاری متناسب با هر جایگاه ──────────────────────────────────────── */

.dpt-blocks--below_title {
  margin-block: 0.9rem 1.1rem;
}

/*
 * ── چرا `order` لازم است ──────────────────────────────────────────────────────
 * ستون راست صفحهٔ محصول در hummingbird یک flex عمودی است که قالب روی فرزندانش
 * `order` صریح گذاشته: نام محصول `order: 2` و توضیح کوتاه `order: 3`. بلوک ما
 * `order` ندارد، پس مقدار پیش‌فرض `0` می‌گیرد و **پیش از نام محصول** — حتی بالای
 * لوگوی برند — رندر می‌شود، هرچند در DOM بعد از نام آمده است.
 *
 * مقدار `3` یعنی هم‌رتبه با توضیح کوتاه؛ در تساویِ `order`، ترتیب DOM تصمیم
 * می‌گیرد و بلوک دقیقاً بین نام و توضیح کوتاه می‌نشیند — همان‌جایی که باید.
 */
.product__right > .dpt-blocks--below_title {
  order: 3;
}

/*
 * ── جایگاه «زیر بخش خرید» ─────────────────────────────────────────────────────
 * این بلوک فرزندِ مستقیم `.product__right` است؛ همان flex عمودی که قالب روی
 * فرزندانش `order` صریح گذاشته (برند ۱، نام ۲، توضیح کوتاه ۳، بستهٔ خرید ۵).
 * بدون `order`، مقدار پیش‌فرض `0` می‌گیرد و به بالای همه‌چیز می‌پرد. مقدار ۶ آن را
 * پس از بستهٔ خرید و در انتهای ستون می‌نشاند — تمام‌عرض، از لبهٔ کارت قیمت تا
 * انتهای ستون مشخصات.
 *
 * فاصلهٔ بالا عمداً بزرگ است: درست بالای این بلوک، کارت قیمت و جعبهٔ گارانتی
 * قرار دارند که آن‌ها هم کارت‌های حاشیه‌دارند. با فاصلهٔ کم، چشم همه را یک گروه
 * می‌بیند و مرز «بخش خرید» و «نشان‌های اعتماد» گم می‌شود.
 */
.product__right > .dpt-blocks--below_purchase {
  order: 6;
}

.dpt-blocks--below_purchase {
  margin-block: 2rem 0.5rem;
}

.dpt-blocks--below_price,
.dpt-blocks--below_add_to_cart {
  --dpt-gap: 0.5rem;

  margin-block: 0.85rem 0;
  gap: 0.65rem;
}

.dpt-blocks--reassurance {
  margin-block-start: 0.5rem;
}

.dpt-blocks--product_footer {
  margin-block: 2rem;
}

.dpt-blocks--extra_tab,
.dpt-block--extra-tab {
  display: block;
}

/*
 * جایگاه سفارشی در قالب hummingbird داخل کارت خرید و بالای دکمهٔ «افزودن به سبد»
 * قرار دارد. متریک‌ها عمداً همان چیزی است که قالب پیش‌تر برای خط ثابتِ
 * «قیمت‌ها و موجودی … به‌روز است» داشت (`.product__stock-freshness`)، تا با
 * جایگزینی آن خط با یک بلوکِ قابل ویرایش، ظاهر صفحه تغییر نکند.
 */
.product__purchase-summary .dpt-blocks--custom {
  margin-block: 0 1.7rem;
  gap: 0.5rem;
}

.product__purchase-summary .dpt-notice--inline {
  padding: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 2;
}

/* ── جعبهٔ هشدار / اطلاع‌رسانی ─────────────────────────────────────────────── */

.dpt-notice {
  --dpt-notice-accent: var(--dpt-info);
  --dpt-notice-soft: var(--dpt-info-soft);
  --dpt-notice-glyph: 'i';

  position: relative;
  padding: 1rem 1.15rem;
  overflow: hidden;
  line-height: 1.95;
  text-align: justify;
  background: var(--dpt-surface);
  border: 1px solid var(--dpt-border);
  border-radius: var(--dpt-radius);
  box-shadow: var(--dpt-shadow);
}

/*
 * نوار رنگی لبه با `::before` ساخته می‌شود و نه `border-inline-start`: با border،
 * پس‌زمینهٔ گوشه‌ها از زیر شعاع بیرون می‌زد و در RTL/LTR یکسان درنمی‌آمد.
 */
.dpt-notice::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  content: '';
  background: var(--dpt-notice-accent);
}

.dpt-notice--warning {
  --dpt-notice-accent: var(--dpt-warning);
  --dpt-notice-soft: var(--dpt-warning-soft);
  --dpt-notice-glyph: '!';
}

.dpt-notice--success {
  --dpt-notice-accent: var(--dpt-success);
  --dpt-notice-soft: var(--dpt-success-soft);
  --dpt-notice-glyph: '✓';
}

.dpt-notice__title {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--dpt-notice-accent);
}

/* نشان دایره‌ای پیش از عنوان؛ حرفش با واریانت عوض می‌شود. */
.dpt-notice__title::before {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  color: var(--dpt-notice-accent);
  content: var(--dpt-notice-glyph);
  background: var(--dpt-notice-soft);
  border: 1px solid color-mix(in srgb, var(--dpt-notice-accent) 30%, transparent);
  border-radius: 50%;
}

.dpt-notice p {
  margin: 0 0 0.55rem;
  font-size: 0.875rem;
}

.dpt-notice p:last-child {
  margin-bottom: 0;
}

/*
 * فهرست‌ها نشانگر پیش‌فرض مرورگر را نمی‌گیرند: یک تیکِ هم‌رنگ بلوک، هم خواناتر
 * است و هم در RTL بدون تنظیم `padding` جداگانه سر جایش می‌ماند.
 */
.dpt-notice ul {
  padding: 0;
  margin: 0.35rem 0 0;
  list-style: none;
}

.dpt-notice li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.dpt-notice li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  content: '';
  background: var(--dpt-notice-accent);
  border-radius: 50%;
  opacity: 0.85;
}

.dpt-notice li:last-child {
  margin-bottom: 0;
}

.dpt-notice a {
  color: var(--dpt-notice-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 700;
}

.dpt-notice a:hover,
.dpt-notice a:focus-visible {
  text-decoration-thickness: 2px;
}

/*
 * نسخهٔ فشرده برای کارت خرید: یک خط، وسط‌چین، بدون نوار لبه و بدون نشان عنوان.
 * جای خط ثابتی را می‌گیرد که پیش‌تر در `product.tpl` قالب hardcode شده بود.
 */
.dpt-notice--inline {
  padding: 0.5rem 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  text-align: center;
  background: var(--dpt-notice-soft);
  border-color: color-mix(in srgb, var(--dpt-notice-accent) 25%, transparent);
  box-shadow: none;
}

.dpt-notice--inline::before {
  display: none;
}

.dpt-notice--inline p {
  margin: 0;
  font-size: inherit;
}

/* ── نشان‌های ضمانت ────────────────────────────────────────────────────────── */

.dpt-trust {
  display: grid;
  gap: var(--dpt-gap);
  /*
   * ۲۱۰px کف عرضی است که بلندترین عبارت («۷ روز ضمانت بازگشت وجه و مرجوعی +
   * ضمانت ترب») در دو خط جا شود. زیر آن، شبکه خودش به یک ستون می‌افتد.
   */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.dpt-trust__item {
  --dpt-trust-accent: var(--dpt-success);
  --dpt-trust-soft: var(--dpt-success-soft);

  position: relative;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--dpt-ink);
  background:
    linear-gradient(
      to left,
      color-mix(in srgb, var(--dpt-trust-accent) 6%, transparent),
      transparent 55%
    ),
    var(--dpt-surface);
  border: 1px solid var(--dpt-border);
  border-radius: var(--dpt-radius);
  box-shadow: var(--dpt-shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* نوار رنگی لبه، هم‌شکل با جعبهٔ هشدار. */
.dpt-trust__item::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  content: '';
  background: var(--dpt-trust-accent);
}

.dpt-trust__item:hover {
  border-color: color-mix(in srgb, var(--dpt-trust-accent) 35%, var(--dpt-border));
  box-shadow: var(--dpt-shadow-hover);
  transform: translateY(-2px);
}

.dpt-trust__item--info {
  --dpt-trust-accent: var(--dpt-info);
  --dpt-trust-soft: var(--dpt-info-soft);
}

.dpt-trust__item--warning {
  --dpt-trust-accent: var(--dpt-warning);
  --dpt-trust-soft: var(--dpt-warning-soft);
}

.dpt-trust__item--brand {
  --dpt-trust-accent: var(--dpt-brand);
  --dpt-trust-soft: var(--dpt-brand-soft);
}

/*
 * اموجی داخل یک مربع رنگی می‌نشیند تا اندازه‌اش یکدست شود و ردیف‌ها هم‌تراز
 * بمانند؛ بدون آن، هر اموجی عرض متفاوتی می‌گرفت و متن‌ها پله‌پله می‌شدند.
 */
.dpt-trust__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.05rem;
  line-height: 1;
  background: var(--dpt-trust-soft);
  border-radius: 0.55rem;
  /* اموجی همیشه چپ‌به‌راست است و نباید جهت جمله را بشکند. */
  unicode-bidi: isolate;
}

/*
 * `auto-fit` روی شبکه‌ای که فقط یک آیتم دارد آن را تمام‌عرض می‌کند. در نوار
 * تمام‌عرض پایین صفحه این یعنی یک کارت ۱۴۰۰ پیکسلی؛ سقف عرض ستون جلویش را
 * می‌گیرد بدون آنکه در کارت خرید چیزی خراب شود.
 */
.dpt-blocks--reassurance .dpt-trust,
.dpt-blocks--product_footer .dpt-trust {
  grid-template-columns: repeat(auto-fit, minmax(210px, 320px));
  justify-content: center;
}

/*
 * ── چرا `auto-fit` و نه ستون ثابت ─────────────────────────────────────────────
 * عرض این ناحیه به **چیدمان صفحه** بستگی دارد، نه به عرض پنجره: گالری تصویر و
 * کارت قیمت سهم خودشان را می‌گیرند و باقی‌مانده بین ۱۰۰۰px و ۴۰۰px نوسان می‌کند.
 * با ستون ثابت، در عرض‌های کم هر نشان به چند خط می‌شکست؛ و media query هم کمکی
 * نمی‌کرد چون عرض پنجره اندازهٔ این ظرف را نمی‌گوید.
 *
 * `auto-fit` با کف ۲۴۰px مستقیماً به عرض **ظرف** واکنش نشان می‌دهد: دو ستون در
 * حالت عادی و یک ستون وقتی ناحیه تنگ می‌شود.
 */
.dpt-blocks--below_purchase .dpt-trust {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (max-width: 575.98px) {
  .dpt-notice {
    padding: 0.85rem 0.95rem;
  }

  .dpt-blocks--reassurance .dpt-trust,
  .dpt-blocks--product_footer .dpt-trust {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .dpt-trust__item:hover {
    transform: none;
  }
}

/* ── آکاردئون جایگاه «زیر نوار موجودی» ─────────────────────────────────────
 *
 * ردیف‌های جمع‌شونده با آیکن، عنوان و فلش. بدون جاوااسکریپت: عنصر بومی
 * `<details>` باز و بسته می‌شود، پس رفتار در حالت بی‌اسکریپت و برای
 * صفحه‌خوان هم درست است.
 *
 * تمام فاصله‌ها منطقی‌اند (`inline-start/end`) تا در راست‌چین و چپ‌چین
 * یکسان کار کنند.
 */
.dpt-accordion {
  margin-block-start: 1.25rem;
}

.dpt-accordion__item {
  border-block-start: 1px solid var(--dpt-border, rgba(16, 24, 40, 0.1));
}

.dpt-accordion__item:last-child {
  border-block-end: 1px solid var(--dpt-border, rgba(16, 24, 40, 0.1));
}

.dpt-accordion__summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-block: 1.05rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #25282c;
  cursor: pointer;
  list-style: none;
}

/* فلشِ پیش‌فرضِ مرورگر حذف می‌شود تا فقط فلش خودمان دیده شود. */
.dpt-accordion__summary::-webkit-details-marker {
  display: none;
}

.dpt-accordion__summary::marker {
  content: "";
}

.dpt-accordion__summary:hover,
.dpt-accordion__summary:focus-visible {
  color: #000;
}

.dpt-accordion__icon {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: #40444a;
}

/* عنوان تمام فضای میانی را می‌گیرد تا فلش همیشه به لبهٔ مقابل بچسبد. */
.dpt-accordion__title {
  flex: 1 1 auto;
  min-width: 0;
}

.dpt-accordion__chevron {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: #8a8f96;
  transition: transform 200ms ease;
}

.dpt-accordion__item[open] .dpt-accordion__chevron {
  transform: rotate(180deg);
}

.dpt-accordion__body {
  padding-block-end: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #4f545a;
}

.dpt-accordion__body > :first-child {
  margin-block-start: 0;
}

.dpt-accordion__body > :last-child {
  margin-block-end: 0;
}