/* ===== SbTrustModals 1.18.0 — «کارت چیپ رنگی» برای نوار اعتماد (تنظیم: طراحی کارتی رنگی نوار اعتماد) =====
 * نوار در یک قاب جدا با گوشهٔ گرد؛ هر آیکن داخل دایرهٔ رنگی ملایم خودش (به ترتیب: سبز، آبی، بنفش، نارنجی، فیروزه‌ای)،
 * خط جداکنندهٔ نازک بین گزینه‌ها. فقط ظاهر؛ ساختار، کلیک و مدال‌ها دست‌نخورده‌اند.
 * رنگ‌ها و اندازه‌ها متغیر CSS هستند و از «CSS سفارشی» ماژول قابل تغییرند، مثلاً:
 * .sbtm-block.sbtm-layout-trustbar { --sbtm-chip-size: 40px; --sbtm-chip-1-bg: #e8f7ef; --sbtm-chip-1: #16a34a; } */
/* variables: low specificity on purpose, so «CSS سفارشی» can override them */
.sbtm-block.sbtm-layout-trustbar {
  --sbtm-chip-size: 38px; --sbtm-chip-fs: 11px; --sbtm-chip-radius: 14px;
  --sbtm-chip-card-bg: #fff; --sbtm-chip-line: #eceff4; --sbtm-chip-ink: #374151;
  --sbtm-chip-1-bg: #e8f7ef; --sbtm-chip-1: #16a34a;
  --sbtm-chip-2-bg: #eaf2ff; --sbtm-chip-2: #2563eb;
  --sbtm-chip-3-bg: #f1ecff; --sbtm-chip-3: #7c3aed;
  --sbtm-chip-4-bg: #fff4e5; --sbtm-chip-4: #d97706;
  --sbtm-chip-5-bg: #e6f7f6; --sbtm-chip-5: #0d9488;
}
@media (max-width: 400px) {
  .sbtm-block.sbtm-layout-trustbar { --sbtm-chip-size: 34px; --sbtm-chip-fs: 10px; }
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar {
  position: relative !important;
  background: var(--sbtm-chip-card-bg) !important;
  border: 1px solid var(--sbtm-chip-line) !important;
  border-radius: var(--sbtm-chip-radius) !important;
  padding: 10px 6px !important;
  margin: 14px 0 !important;
  box-shadow: none !important;
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar > .sbtm-grid > .sbtm-style-trustbar {
  min-height: 0 !important;
  padding: 2px !important;
  gap: 6px !important;
  border-radius: 10px !important;
  background: transparent !important;
  position: relative !important;
  justify-content: flex-start !important;
}
/* thin dividers between the items (one-row layout only) */
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar > .sbtm-grid:not(.sbtm-trustbar-split) > .sbtm-style-trustbar + .sbtm-style-trustbar::before {
  content: "" !important;
  position: absolute !important;
  top: 18% !important;
  bottom: 18% !important;
  right: 0 !important;
  width: 1px !important;
  background: var(--sbtm-chip-line) !important;
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar .sbtm-trigger-icon {
  --sbtm-icon-size: calc(var(--sbtm-chip-size) * .5);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: var(--sbtm-chip-size) !important;
  height: var(--sbtm-chip-size) !important;
  border-radius: 50% !important;
  background: var(--sbtm-chip-2-bg) !important;
  color: var(--sbtm-chip-2) !important;
  opacity: 1 !important;
  transition: transform .15s ease !important;
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-trigger-icon :is(svg, img) {
  width: 52% !important;
  height: 52% !important;
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-trigger-icon svg,
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-trigger-icon svg * {
  stroke-width: 1.8px !important;
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:nth-child(5n+1) .sbtm-trigger-icon { background: var(--sbtm-chip-1-bg) !important; color: var(--sbtm-chip-1) !important; }
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:nth-child(5n+2) .sbtm-trigger-icon { background: var(--sbtm-chip-2-bg) !important; color: var(--sbtm-chip-2) !important; }
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:nth-child(5n+3) .sbtm-trigger-icon { background: var(--sbtm-chip-3-bg) !important; color: var(--sbtm-chip-3) !important; }
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:nth-child(5n+4) .sbtm-trigger-icon { background: var(--sbtm-chip-4-bg) !important; color: var(--sbtm-chip-4) !important; }
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:nth-child(5n+5) .sbtm-trigger-icon { background: var(--sbtm-chip-5-bg) !important; color: var(--sbtm-chip-5) !important; }
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-trigger-title {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--sbtm-chip-ink) !important;
  font-size: var(--sbtm-chip-fs) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}
@media (hover: hover) {
  html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:hover .sbtm-trigger-icon { transform: translateY(-2px) !important; }
}
html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar .sbtm-style-trustbar:focus-visible {
  outline: 2px solid var(--sbtm-chip-2) !important;
  outline-offset: 2px !important;
}
@media (max-width: 400px) {
  html body:not(#_):not(#__):not(#___) .sbtm-block.sbtm-layout-trustbar { padding-inline: 2px !important; }
}