/**
 * اددان مقایسه — نوار شناور و «فقط تفاوت‌ها» (فاز ۳۰). فقط توکن، فقط ویژگی‌های منطقی.
 *
 * جدول مقایسه خودش `gc-table[data-variant="compare"]` کیت است و CSS تازه نمی‌خواهد؛ این
 * فایل فقط سه چیز را اضافه می‌کند: نوار شناور پایین صفحه، بندانگشتی‌هایش، و پنهان‌کردن
 * سطرهای یکسان وقتی کاربر «فقط تفاوت‌ها» را روشن کرده. فقط وقتی اددان روشن است و یک
 * دکمه‌ی مقایسه یا برگه‌ی مقایسه روی صفحه هست بار می‌شود.
 */

/*
 * ⚠ عمداً بدون `@layer components`: ریستِ سراسریِ main.css (`*, ::before, ::after { margin/padding/border: 0 }`)
 * بدون لایه است و بر هر قاعده‌ی داخل لایه می‌چربد؛ نتیجه‌اش padding/border/margin صفرشده‌ی نوار بود.
 * این فایل پس از main.css بار می‌شود و کلاس‌هایش فقط مال همین اددان است، پس بی‌لایه امن است.
 */

.gc-compare-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--spacing) * 4);
  z-index: var(--z-sticky);

  /* ظرف تمام‌عرضِ شفاف که فقط پنل داخلی را وسط می‌گذارد؛ justify-content در هر دو جهت (RTL هم) کار
     می‌کند و به margin:auto روی عنصر fixed تکیه نمی‌کند (ریست سراسری بدون لایه آن را صفر می‌کرد). */
  display: flex;
  justify-content: center;
  padding-inline: calc(var(--spacing) * 3);
  pointer-events: none;
}

.gc-compare-bar[hidden] {
  display: none;
}

/* پنل واقعی: عرضش به اندازه‌ی بندانگشتی‌هاست، نه ثابت. */
.gc-compare-bar__panel {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  max-inline-size: 100%;
  padding-block: calc(var(--spacing) * 2.5);
  padding-inline: calc(var(--spacing) * 3);

  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}

/* پنل کاربری (سایدبار ثابت از lg): وسط‌چینی در ناحیه‌ی محتوا، نه کل پنجره — وگرنه زیر سایدبار می‌رفت. */
@media (min-width: 64rem) {
  body:has(.gc-panel-sidebar) .gc-compare-bar {
    inset-inline-start: var(--width-sidebar);
  }
}

/* موبایل: بالاتر از نوار پایین و نوار خرید چسبان بنشیند. */
@media (max-width: 63.9375rem) {
  body:has(.gc-bottom-bar) .gc-compare-bar {
    inset-block-end: calc(var(--height-bottombar) + var(--size-rail) + calc(var(--spacing) * 4));
  }

  body:has(.gc-buy-bar) .gc-compare-bar {
    inset-block-end: calc(var(--gc-buybar-size, var(--height-buybar)) + calc(var(--spacing) * 4));
  }

  body:has(.gc-buy-bar):has(.gc-bottom-bar) .gc-compare-bar {
    inset-block-end: calc(
      var(--height-bottombar) + var(--size-rail) + var(--gc-buybar-size, var(--height-buybar)) + calc(var(--spacing) * 6)
    );
  }
}

.gc-compare-bar__items {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gc-compare-bar__item {
  position: relative;
  flex: none;
}

.gc-compare-bar__thumb {
  display: block;
  inline-size: calc(var(--spacing) * 10);
  block-size: calc(var(--spacing) * 10);
  overflow: hidden;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.gc-compare-bar__thumb img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.gc-compare-bar__remove {
  /* روی گوشه‌ی تصویر. آیکون `close-circle` خودش دایره دارد؛ پس دکمه حلقه/پس‌زمینه‌ی جدا ندارد —
     وگرنه دو دایره‌ی تودرتو (یک آیکون «دوتایی») دیده می‌شد. */
  position: absolute;
  inset-block-start: calc(var(--spacing) * -1.5);
  inset-inline-end: calc(var(--spacing) * -1.5);

  display: block;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);

  color: var(--color-ink);
  background-color: var(--color-surface);
  font-size: var(--size-icon-sm);
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.gc-compare-bar__remove > span {
  display: block;
  line-height: 1;
}

/* هاور: فقط رنگ قرمز (حذف)؛ هیچ جابه‌جایی/اندازه‌ای عوض نمی‌شود. */
.gc-compare-bar__remove:hover {
  color: var(--color-danger);
}

.gc-compare-bar__remove:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.gc-compare-bar__count {
  margin: 0;
  flex: none;
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gc-compare-bar__max {
  color: var(--color-ink-muted);
  font-weight: 400;
}

.gc-compare-bar__actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  flex: none;
}

.gc-compare-bar__actions [hidden] {
  display: none;
}

/* «فقط تفاوت‌ها»: سطر یکسان پنهان شود. */
.gc-compare [data-gc-compare-table][data-diff-only="true"] .gc-table[data-variant="compare"] tr[data-same="true"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gc-compare-bar__remove {
    transition: none;
  }
}

/*
 * جدول مقایسه در موبایل: `.gc-table-wrap` خودش `overflow-x: auto` دارد ولی `position: static` است؛ پس هر
 * فرزند مطلق‌چین داخل جدول (متن `gc-sr-only` امتیاز/قیمت، اسپینر دکمه) شاملِ مرزِ آن نمی‌شود و بریده
 * نمی‌شود — در ستون‌های دورِ جدول از صفحه بیرون می‌زند، سند را پهن می‌کند (اسکرول افقیِ کل صفحه) و ویوپورت
 * ماژولیِ موبایل بزرگ می‌شود؛ نتیجه: نوار پایین `fixed` به عرض ۱۱۰۰px کش می‌آمد و آیتم‌هایش بهم می‌ریخت.
 * `position: relative` مرز را برای همه‌ی آن‌ها می‌سازد و درون خود بریده/اسکرول می‌شوند.
 */
.gc-compare .gc-table-wrap {
  position: relative;
}

/*
 * ── موبایل (< md): مقایسه‌ی «دوتا‌دوتا» به‌جای اسکرول افقی ───────────────────────────────────
 * الگوی سایت‌های حرفه‌ای: ستون «نام ویژگی» ۴۰٪ عرض را می‌خورد، پس هر برچسب یک ردیف تمام‌عرض بالای مقدارها
 * می‌شود و هر محصول نصف عرض را می‌گیرد. فقط دو محصول دیده می‌شود (بقیه با `data-off` پنهان و با صفحه‌بند
 * «قبلی/بعدی» جابه‌جا می‌شوند)، هدر محصولات چسبان است، و دکمه‌ی خرید به ردیف آخر می‌رود تا هدر چسبان بلند
 * نشود. دسکتاپ/تبلت بدون تغییر همان جدولِ کیت می‌ماند. بریک‌پوینت هم‌راستای JS (`mobileQuery`).
 */
.gc-compare__cta-row,
.gc-compare__pager {
  display: none;
}

@media (max-width: 47.9375rem) {
  .gc-compare .gc-table-wrap[data-variant="compare"] {
    overflow: visible;
  }

  .gc-compare .gc-table[data-variant="compare"],
  .gc-compare .gc-table[data-variant="compare"] thead,
  .gc-compare .gc-table[data-variant="compare"] tbody {
    display: block;
    inline-size: 100%;
  }

  .gc-compare .gc-table[data-variant="compare"] tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ⚠ قواعد کیت (`gc-table.css`) بدون لایه‌اند و ویژگی‌مندی‌شان بالاست (`thead th:first-child`,
     `th[scope="row"]`)؛ برای همین هر انتخابگر این‌جا با `[data-variant="compare"]` شروع می‌شود. */
  .gc-compare .gc-table[data-variant="compare"] th,
  .gc-compare .gc-table[data-variant="compare"] td,
  .gc-compare .gc-table[data-variant="compare"] thead th:first-child,
  .gc-compare .gc-table[data-variant="compare"] th[scope="row"] {
    min-inline-size: 0;
    max-inline-size: none;
    position: static;
  }

  .gc-compare .gc-table[data-variant="compare"] [data-off] {
    display: none;
  }

  /* هدر چسبان: فقط تصویر کوچک، نام و قیمت. */
  .gc-compare .gc-table[data-variant="compare"] thead {
    position: sticky;
    inset-block-start: var(--height-header-compact);
    background-color: var(--color-surface);
    border-block-end: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
  }

  .gc-compare .gc-table[data-variant="compare"] thead th:first-child {
    display: none;
  }

  .gc-compare .gc-table[data-variant="compare"] thead th {
    position: relative;
    padding: calc(var(--spacing) * 2);
  }

  .gc-compare .gc-table[data-variant="compare"] thead th > div {
    gap: calc(var(--spacing) * 1);
    padding-block: 0;
  }

  .gc-compare .gc-table[data-variant="compare"] thead th img {
    inline-size: calc(var(--spacing) * 10);
    block-size: calc(var(--spacing) * 10);
    object-fit: cover;
  }

  .gc-compare .gc-table[data-variant="compare"] thead .gc-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: var(--text-xs);
    text-align: center;
  }

  /* حذف: گوشه‌ی بالای ستون، بیرون از جریان. */
  .gc-compare .gc-table[data-variant="compare"] thead [data-gc-compare-remove] {
    position: absolute;
    inset-block-start: calc(var(--spacing) * 0.5);
    inset-inline-end: calc(var(--spacing) * 0.5);
  }

  .gc-compare .gc-table[data-variant="compare"] thead .gc-compare__cta {
    display: none;
  }

  /* برچسب ویژگی: ردیف تمام‌عرض کوچک و کم‌رنگ بالای مقدارها. */
  .gc-compare .gc-table[data-variant="compare"] th[scope="row"] {
    grid-column: 1 / -1;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    border-inline-end: 0;
    background-color: var(--color-surface-alt);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: start;
  }

  .gc-compare .gc-table[data-variant="compare"] td {
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2);
    overflow-wrap: anywhere;
  }

  .gc-compare .gc-table[data-variant="compare"] td + td {
    border-inline-start: 1px solid var(--color-line);
  }

  .gc-compare .gc-compare__cta-row {
    display: grid;
  }

  .gc-compare .gc-compare__cta-row th[scope="row"] {
    display: none;
  }

  .gc-compare .gc-compare__cta-row td {
    border-block-start: 1px solid var(--color-line);
  }

  .gc-compare__pager[data-active="true"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    margin-block-end: calc(var(--spacing) * 3);
  }

  .gc-compare__range {
    margin: 0;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }
}