/* SB Feature Groups 1.7.0 — tidy presentation (tidy.js). Selectors are deliberately specific: front.css and
   values.css are full of !important rules. */

/* 1 — «label: value» → one value per line, muted label + bold LTR code */
html body .sbffc-root .sbffc-value-list.sbfg-kv-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
  width: 100% !important;
  margin-inline-start: 0 !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-kv-list > .sbffc-value-chip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 2px 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-bottom: 1px dashed #e5e9ef !important;
  border-radius: 0 !important;
  background: none !important;
  text-align: start !important;
  white-space: normal !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-kv-list > .sbffc-value-chip:last-of-type,
html body .sbffc-root .sbffc-value-list.sbfg-kv-list > .sbffc-value-chip:has(+ .sbfg-more) {
  border-bottom: 0 !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-kv-list > .sbffc-value-chip::before,
html body .sbffc-root .sbffc-value-list.sbfg-kv-list > .sbffc-value-chip::after {
  display: none !important; /* no pipe / dot separators in a one-per-line list */
}
html body .sbffc-root .sbffc-value-chip > span:not([class]):has(> .sbfg-kv-k) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
html body .sbffc-root .sbfg-kv-k {
  color: #6b7280;
  font-size: .92em;
  font-weight: 500;
  white-space: nowrap;
}
html body .sbffc-root .sbfg-kv-v {
  color: #111827;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  unicode-bidi: isolate;
  direction: ltr;
}
html body .sbffc-root .sbffc-value-list.sbfg-kv-list > .sbfg-more {
  align-self: flex-start !important;
  margin-top: 4px !important;
}

/* 2 — summary values grouped by year: small heading before the first value of each year */
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip.sbfg-yg-first {
  margin-top: 6px !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip.sbfg-yg-first:first-child {
  margin-top: 0 !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip.sbfg-yg-first::before {
  content: attr(data-sbfg-year) !important;
  display: block !important;
  flex: 0 0 100% !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 3px !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid #e3e8f0 !important;
  background: none !important;
  color: #2563eb !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  direction: rtl !important;
  opacity: 1 !important;
  transform: none !important;
}
/* inside a year group the per-value year tag only repeats the heading */
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip .sbfg-value-years {
  display: none !important;
}
/* grouped lists: one value per line under its year heading (no pipe / dot separators) */
html body .sbffc-root .sbffc-value-list.sbfg-yg-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  width: 100% !important;
  margin-inline-start: 0 !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding-inline-start: 0 !important;
  text-align: start !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip:not(.sbfg-yg-first)::before,
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbffc-value-chip::after {
  display: none !important;
}

/* 3 — compact family-table header: one line, toggle beside the label */
html body .sbffc-root.sbfg-compact-head:not(.sbffc-single-root) .sbffc-product-card {
  flex-direction: row-reverse !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 6px !important;
  min-height: 0 !important;
}
html body .sbffc-root.sbfg-compact-head:not(.sbffc-single-root) .sbffc-product-card-bar {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
}
html body .sbffc-root.sbfg-compact-head:not(.sbffc-single-root) .sbffc-col-toggle {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
}
html body .sbffc-root.sbfg-compact-head:not(.sbffc-single-root) .sbffc-product-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .sbffc-root.sbfg-compact-head:not(.sbffc-single-root) .sbffc-feature-header-cell {
  padding: 6px 12px !important;
}

/* 4 — native pinned header (position:fixed strip); the table's own header never moves */
html body .sbffc-root.sbfg-pin-native .sbffc-feature-header-cell,
html body .sbffc-root.sbfg-pin-native .sbffc-product-header-cell,
html body .sbffc-root.sbfg-pin-native .sbffc-comparison-table th.sbffc-product-header-cell,
html body .sbffc-root.sbfg-pin-native .sbffc-comparison-table th.sbffc-feature-header-cell {
  transform: none !important;
  will-change: auto !important;
}
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-comparison-table th.sbffc-product-header-cell,
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-comparison-table th.sbffc-feature-header-cell {
  background: #f8fafc !important;
  color: inherit !important;
  box-shadow: none !important;
}
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-comparison-table th.sbffc-feature-header-cell {
  background: #eef2f7 !important;
}
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-comparison-table th.sbffc-product-header-cell.is-current {
  background: var(--sbffc-accent-soft, #eff6ff) !important;
}
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-product-label,
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-feature-header-text {
  color: inherit !important;
}
html body .sbffc-root.sbfg-pin-native.is-header-pinned .sbffc-col-toggle {
  color: inherit !important;
  background: #fff !important;
  border-color: #d5dbe5 !important;
}
.sbfg-pinstrip {
  position: fixed;
  z-index: 990;
  display: none;
  height: 36px;
  overflow: hidden;
  direction: rtl;
  background: var(--sbffc-pin-bg, #475569);
  color: var(--sbffc-pin-text, #fff);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .22);
  pointer-events: none;
}
.sbfg-pinstrip.is-on { display: block; }
.sbfg-pinstrip-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  will-change: transform;
}
.sbfg-pinstrip-cell,
.sbfg-pinstrip-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 6px;
  box-sizing: border-box;
  border-left: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sbfg-pinstrip-cell.is-current { box-shadow: inset 0 -3px 0 #60a5fa; }
.sbfg-pinstrip-feature {
  position: absolute;
  top: 0;
  right: 0;
  justify-content: flex-start;
  padding: 0 12px;
  background: var(--sbffc-pin-bg, #475569);
}
/* touch screens (iPhone): the sticky feature column inside the horizontally scrolling table is painted late or
   not at all by Safari. 1.7.2: a frozen copy of the column (.sbfg-frozen, built by tidy.js) sits OUTSIDE the
   scroller, so nothing has to stick; the table's own column stays underneath. */
@media (pointer: coarse) {
  html body .sbffc-root:not(.sbffc-single-root) .sbffc-product-header-cell,
  html body .sbffc-root:not(.sbffc-single-root) .sbffc-feature-header-cell {
    transition: none !important;
  }
}
html body .sbffc-root .sbffc-table-region { position: relative !important; }
.sbfg-frozen {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 45;
  pointer-events: none;
  direction: rtl;
}
.sbfg-frozen-cell {
  position: absolute;
  right: 0;
  left: 0;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
  background: #f8fafc;
  border-left: 1px solid #e5e9ee;
  border-bottom: 1px solid #e5e9ee;
  padding: 11px 12px;
  text-align: right;
}
.sbfg-frozen-cell.is-head { background: #eef2f7; padding: 6px 12px; display: flex; align-items: center; font-weight: 800; font-size: 13px; }
.sbfg-frozen-cell.is-group { background: #e9eef5; border-color: #d8dee7; padding: 0; }
.sbfg-frozen-cell.is-group > .sbffc-group-toggle-button { width: 100%; height: 100%; }
.sbfg-frozen-cell.is-empty { background: transparent; border: 0; pointer-events: none; }
.sbfg-frozen-cell > .sbffc-feature-name-text { white-space: normal; }

/* 5 — year chips: own full-width row, bigger, clearly the way to switch years */
html body .sbffc-root .sbffc-toolbar-inner:has(> .sbffc-year-filter) {
  flex-wrap: wrap !important;
}
html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter {
  order: -1 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  background: #f5f8ff !important;
  border: 1px solid #dfe7fb !important;
  border-radius: 12px !important;
}
html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter::before {
  content: var(--sbfg-years-title, "مشخصات کدام سال؟");
  margin-inline-end: 4px;
  color: #1e3a8a;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter .sbffc-year-filter-button {
  min-height: 34px !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  border: 1px solid #c9d6f5 !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter .sbffc-year-filter-button .sbffc-year-eye {
  display: none !important;
}
html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter .sbffc-year-filter-button.is-active,
html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter .sbffc-year-filter-button[aria-pressed="true"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
@media (hover: hover) {
  html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter .sbffc-year-filter-button:not(.is-active):hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
  }
}
@media (max-width: 400px) {
  html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter { padding: 6px 8px !important; gap: 5px !important; }
  html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter::before { flex: 0 0 100%; margin: 0 0 2px; }
  html body .sbffc-root .sbffc-toolbar-inner > .sbffc-year-filter .sbffc-year-filter-button { flex: 1 1 0 !important; min-width: 0 !important; padding: 4px 6px !important; }
}
html body .sbffc-root .sbffc-value-list.sbfg-yg-list > .sbfg-yg-more {
  align-self: flex-start !important;
  margin: 2px 0 4px !important;
}
/* pipe / dot styles draw their separator as a background image: none in one-per-line lists */
html body .sbffc-root.sbffc-root .sbffc-value-list.sbfg-yg-list.sbfg-yg-list > .sbffc-value-chip.sbffc-value-chip,
html body .sbffc-root.sbffc-root .sbffc-value-list.sbfg-kv-list.sbfg-kv-list > .sbffc-value-chip.sbffc-value-chip {
  background: none !important;
  padding-inline-start: 0 !important;
}

/* 1.7.1 — summary values with their own year set: compact chips on one line (no heading per value) */
html body .sbffc-root .sbffc-value-list.sbfg-yinline {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
  margin-inline-start: 0 !important;
}
html body .sbffc-root.sbffc-root .sbffc-value-list.sbfg-yinline.sbfg-yinline > .sbffc-value-chip.sbffc-value-chip {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-yinline > .sbffc-value-chip::before,
html body .sbffc-root .sbffc-value-list.sbfg-yinline > .sbffc-value-chip::after {
  display: none !important;
}
html body .sbffc-root .sbffc-value-list.sbfg-yinline .sbfg-value-years {
  margin: 0 !important;
  padding: 0 5px !important;
  border-radius: 5px !important;
  background: #eef3ff !important;
  color: #2563eb !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
}
html body .sbffc-root .sbfg-frozen-cell .sbffc-feature-name-text {
  display: block;
  color: #354052;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .sbffc-root .sbfg-frozen-cell.is-group .sbffc-group-toggle-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #1f2937 !important;
  font: inherit;
  font-weight: 800;
  text-align: right;
}
html body .sbffc-root .sbfg-frozen-cell.is-group .sbffc-group-toggle-button * { color: #1f2937 !important; }

/* 1.7.3 — yes/no per year: «2025 ✗  2024 ✓ …» */
html body .sbffc-root .sbffc-value-list.sbfg-ybool-list { display: block !important; width: 100% !important; margin-inline-start: 0 !important; }
html body .sbffc-root .sbfg-ybool { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
html body .sbffc-root .sbfg-yb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px 2px 8px; border-radius: 8px; border: 1px solid #e1e6ee; background: #fff;
  color: #374151; font-size: 12px; line-height: 20px; white-space: nowrap;
}
html body .sbffc-root .sbfg-yb > b { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
html body .sbffc-root .sbfg-yb .sbffc-boolean-value { display: inline-flex !important; margin: 0 !important; }
html body .sbffc-root .sbfg-yb.is-yes { background: #effaf3; border-color: #c6ead3; }
html body .sbffc-root .sbfg-yb.is-no { background: #fff2f1; border-color: #f6cfca; }
html body .sbffc-root .sbfg-yb.is-mixed { background: #fffaeb; border-color: #f3dea0; }
html body .sbffc-root .sbfg-yb.is-none { color: #9ca3af; }
html body .sbffc-root .sbfg-yb > small { color: #92400e; font-size: 10.5px; font-weight: 600; }

/* 1.7.4 — model summary: «year → values» lines (only rows whose values differ by year) */
html body .sbffc-root .sbffc-value-list.sbfg-yrows-list { display: block !important; width: 100% !important; margin-inline-start: 0 !important; }
html body .sbffc-root .sbfg-yrows { display: flex; flex-direction: column; width: 100%; }
html body .sbffc-root .sbfg-yrow {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: start;
  gap: 4px 10px;
  padding: 5px 0;
  border-bottom: 1px dashed #dfe5ee;
}
html body .sbffc-root .sbfg-yrow:first-child { padding-top: 0; }
html body .sbffc-root .sbfg-yrow:last-child { border-bottom: 0; padding-bottom: 0; }
html body .sbffc-root .sbfg-yrow-y {
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 22px;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}
html body .sbffc-root .sbfg-yrow-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
html body .sbffc-root .sbfg-yrow-v > .sbfg-yv {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: 1px 8px;
  border: 1px solid #e1e6ee;
  border-radius: 7px;
  background: #fff;
  color: #1f2937;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
  unicode-bidi: plaintext;
}
html body .sbffc-root .sbfg-yrow-v > .sbfg-yv[hidden] { display: none !important; }
html body .sbffc-root .sbfg-yrow-v.is-stacked { flex-direction: column; align-items: flex-start; gap: 2px; }
html body .sbffc-root .sbfg-yrow-v.is-stacked > .sbfg-yv { border: 0; background: none; padding: 1px 0; }
html body .sbffc-root .sbfg-yrow-v > .sbfg-yv.is-bool { border: 0; background: none; padding: 0; gap: 6px; align-items: center; min-height: 22px; }
html body .sbffc-root .sbfg-yrow-v .sbfg-yv.is-bool .sbffc-boolean-value { width: auto !important; height: auto !important; min-height: 0 !important; }
html body .sbffc-root .sbfg-yrow-v > .sbfg-yv.is-bool > small { color: #92400e; font-size: 11px; font-weight: 600; }
html body .sbffc-root .sbfg-yrow-v > .sbfg-yv.is-none { border: 0; background: none; color: #9ca3af; }
html body .sbffc-root .sbfg-yrow-v .sbffc-boolean-value { display: inline-flex !important; margin: 0 !important; }
html body .sbffc-root .sbfg-yrow-v > .sbfg-yrow-more { margin: 2px 0 0 !important; }
@media (max-width: 420px) {
  html body .sbffc-root .sbfg-yrow { grid-template-columns: 62px minmax(0, 1fr); gap: 3px 8px; }
}

/* 1.7.5 — phones: rows with year lines use the full width (name above, values below); other rows keep
   «name | value» side by side. The table/tbody become blocks so a block row is not squeezed into a cell. */
@media (max-width: 767px) {
  html body .sbffc-root.sbffc-root.sbfg-model-summary table,
  html body .sbffc-root.sbffc-root.sbfg-model-summary table > tbody,
  html body .sbffc-root.sbffc-root.sbfg-model-summary table > thead,
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr.sbfg-has-yrows { display: block !important; width: 100% !important; max-width: none !important; }
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr.sbfg-has-yrows > th,
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr.sbfg-has-yrows > td { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; }
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr.sbfg-has-yrows > th { padding-bottom: 4px !important; }
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr:not(.sbfg-has-yrows) { display: flex !important; width: 100% !important; }
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr:not(.sbfg-has-yrows) > th { flex: 0 0 42% !important; width: 42% !important; max-width: 42% !important; box-sizing: border-box !important; }
  html body .sbffc-root.sbffc-root.sbfg-model-summary table tr:not(.sbfg-has-yrows) > td { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; }
}

/* 1.7.6 — touch screens with the frozen column: no sticky cells left inside the scroller at all
   (iPhone painted them late, left them blank, or widened the scroll area past the table) */
@media (pointer: coarse) {
  html body .sbffc-root.sbfg-has-frozen:not(.sbffc-single-root) .sbffc-comparison-table th.sbffc-feature-name-cell,
  html body .sbffc-root.sbfg-has-frozen:not(.sbffc-single-root) .sbffc-comparison-table th.sbffc-feature-header-cell,
  html body .sbffc-root.sbfg-has-frozen:not(.sbffc-single-root) .sbffc-comparison-table th.sbffc-group-header-cell {
    position: relative !important;
    right: auto !important;
    left: auto !important;
  }
  html body .sbffc-root.sbfg-has-frozen:not(.sbffc-single-root) .sbffc-run-merged > .sbffc-feature-value-content {
    position: static !important;
    right: auto !important;
    max-width: none !important;
  }
}
