/**
 * Anied Categories — Styles
 * این فایل رو دست نزن. برای تغییر محتوا، anied-categories-config.php رو ویرایش کن.
 */

.anied-cat-section { max-width: 1100px; margin: 0 auto;padding: 20px 10px;}

.anied-cat-divider {
  display: flex;
  align-items: center;
  gap: 14px;
}
.anied-cat-divider::before,
.anied-cat-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--anied-border);
}
.anied-cat-divider span {
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--anied-font);
  color: var(--anied-text);
  white-space: nowrap;
}

.anied-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--anied-cat-count, 7), 1fr);
  gap: 8px;
}

.anied-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--anied-text);
  padding: 10px 4px;
}

.anied-cat-item:hover .anied-cat-icon,
.anied-cat-item:hover span { color: var(--anied-brand); }

.anied-cat-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  color: var(--anied-text);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.anied-cat-icon svg { width: 24px; height: 24px; }

.anied-cat-item span {
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--anied-font);
  line-height: 1.5;
  text-align: center;
  color: var(--anied-text);
  transition: color 0.2s ease;
}

/* ===== tablet: still static, just a bit tighter ===== */
@media (max-width: 1000px) and (min-width: 861px) {
  .anied-cat-grid { gap: 4px; }
  .anied-cat-item span { font-size: 11px; }
}

/* ===== mobile: infinite auto-advancing scroll =====
   the viewport is the scroll container, normalized to a plain LTR scroll
   space (same trick as anied-deals) so scrollLeft behaves consistently;
   .anied-cat-grid becomes the track (row-reverse to compensate) and gets
   cloned by anied-categories.js to loop forever. item width is set by JS
   via --anied-cat-item-w so exactly 4 items are always fully visible,
   whatever the phone's screen width — the fallback (74px) only applies
   for a split second before JS measures on load. */
@media (max-width: 860px) {
  .anied-cat-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    direction: ltr;
  }
  .anied-cat-viewport::-webkit-scrollbar { display: none; }

  .anied-cat-grid {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    width: max-content;
    padding: 0 0 6px;
    user-select: none;
  }
  .anied-cat-item {
    flex: 0 0 var(--anied-cat-item-w, 74px);
    width: var(--anied-cat-item-w, 74px);
  }
  /* guarantees the label never wraps to a second line, no matter how a
     phone's exact width divides by 4 — the computed width already targets
     a single line, this is just the safety net for the longest labels */
  .anied-cat-item span:not(.anied-cat-icon) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}