/* =========================================
   استایل نهایی برندها (مربعی 160x160 - فیکس)
   ========================================= */

/* کل سکشن */
.brands-section {
  position: relative;
}

/* کارت اصلی برند */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* وسط‌چین افقی */
  justify-content: center; /* وسط‌چین عمودی */

  height: 160px; /* ارتفاع فیکس */
  /* عرض توسط اسلایدر تنظیم می‌شود اما چون اسلایدها مربعی چیده شده‌اند، حدودا 160 میشود */

  background: #fff;
  border: 1px solid #e4e4e4; /* کادر طوسی پیش‌فرض */
  border-radius: 24px; /* گوشه‌های گرد */
  padding: 10px;
  text-decoration: none !important;

  /* فقط ترنزیشن برای رنگ بردر (بدون حرکت باکس) */
  transition: border-color 0.3s ease;
}

/* باکس لوگو */
.brand-logo-wrap {
  width: 100px; /* فضای مناسب برای لوگو داخل باکس 160 */
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px; /* فاصله کم با متن */
}

.brand-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  /* حالت عادی: سیاه سفید و کمی کوچک */
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* نام برند */
.brand-name {
  font-size: 14px;
  font-weight: 500;
  color: #777;
  margin: 0;
  transition: color 0.3s ease;
}

/* =========================================
   حالت هاور (Hover Effects)
   ========================================= */

.brand-card:hover {
  border-color: #ff8c40; /* فقط کادر نارنجی می‌شود */
  background-color: #fff;
  transform: none !important; /* هیچ حرکتی نمی‌کند */
  box-shadow: none !important; /* سایه ندارد */
}

/* زوم شدن لوگو */
.brand-card:hover .brand-logo-wrap img {
  filter: grayscale(0%); /* رنگی شدن */
  opacity: 1;
  transform: scale(1.25); /* فقط زوم روی لوگو */
}

/* نارنجی شدن متن */
.brand-card:hover .brand-name {
  color: #ff8c40;
}

/* =========================================
   تنظیمات اسلایدر (Pagination)
   ========================================= */
.brandSwiper {
  padding-bottom: 40px !important;
}

.brand-pagination .swiper-pagination-bullet {
  background: #e6e6e6;
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  transition: all 0.3s;
}

.brand-pagination .swiper-pagination-bullet-active {
  background: #ff8c40;
  width: 24px;
  border-radius: 10px;
}