/* کانتینر گرید برای دسته‌ها و برچسب‌ها */
.category-container,
.tag-container {
    display: grid;
    gap: 8px; /* فاصله بین باکس‌ها */
    padding: 5px; /* فاصله داخلی کمتر */
}

/* موبایل: 3 ستون */
@media (max-width: 767px) {
    .category-container,
    .tag-container {
        grid-template-columns: repeat(3, 1fr); /* تنظیم 3 ستون برای موبایل */
    }

    .category-box,
    .tag-box {
        font-size: 3vw; /* اندازه فونت در موبایل */
        padding: 8px; /* فاصله داخلی کمتر */
    }

    .category-count,
    .tag-count {
        font-size: 3.2vw; /* اندازه فونت شمارش در موبایل */
    }
}

/* تبلت: 3 ستون */
@media (min-width: 768px) and (max-width: 1023px) {
    .category-container,
    .tag-container {
        grid-template-columns: repeat(3, 1fr); /* تنظیم 3 ستون برای تبلت */
    }

    .category-box,
    .tag-box {
        font-size: 1.6vw; /* اندازه فونت در تبلت */
        padding: 10px; /* فاصله داخلی بیشتر */
    }

    .category-count,
    .tag-count {
        font-size: 1.8vw; /* اندازه فونت شمارش در تبلت */
    }
}

/* دسکتاپ: 5 ستون */
@media (min-width: 1024px) {
    .category-container,
    .tag-container {
        grid-template-columns: repeat(5, 1fr); /* تنظیم 5 ستون در دسکتاپ */
    }

    .category-box,
    .tag-box {
        font-size: 1vw; /* اندازه فونت در دسکتاپ */
        padding: 12px; /* فاصله داخلی بیشتر در دسکتاپ */
    }

    .category-count,
    .tag-count {
        font-size: 1vw; /* اندازه فونت شمارش در دسکتاپ */
    }
}

/* استایل باکس دسته‌ها */
.category-box {
    background-color: #001f3f; /* پس‌زمینه سورمه‌ای */
    border: 1px solid #004080; /* مرز با رنگ آبی تیره */
    color: white; /* رنگ متن سفید */
    border-radius: 5px; /* گوشه‌های گرد */
    text-align: center; /* تنظیم متن به صورت مرکز */
    padding: 5px; /* کاهش فاصله داخلی */
    box-sizing: border-box;
    transition: all 0.3s ease; /* ترنزیشن برای هاور */
    transform: scale(1); /* اندازه طبیعی باکس */
    touch-action: manipulation; /* برای تعامل راحت با موبایل */
    -webkit-tap-highlight-color: transparent; /* رنگ پس‌زمینه هنگام لمس موبایل */
}

.category-box:hover {
    background-color: #f0f0f0; /* رنگ پس‌زمینه هاور */
    color: #001f3f; /* تغییر رنگ متن به آبی تیره */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* سایه برای هاور */
    transform: scale(1.05); /* بزرگ‌نمایی در هاور */
}

.category-link {
    text-decoration: none; /* حذف خط زیر لینک */
    display: block; /* نمایش بلوکی برای لینک */
    color: inherit; /* ارث‌بری رنگ از والد */
}

/* استایل باکس برچسب‌ها */
.tag-box {
    background-color: #f0f0f0 ; /*#ffd700 پس‌زمینه طلایی */
    border: 1px solid #e6b800; /* مرز با رنگ زرد تیره */
    color: #001f3f; /* رنگ متن سورمه‌ای */
    border-radius: 5px; /* گوشه‌های گرد */
    text-align: center; /* تنظیم متن به صورت مرکز */
    padding: 2px; /* کاهش فاصله داخلی */
    box-sizing: border-box;
    transition: all 0.3s ease; /* ترنزیشن برای هاور */
    transform: scale(1); /* اندازه طبیعی باکس */
    touch-action: manipulation; /* برای تعامل راحت با موبایل */
    -webkit-tap-highlight-color: transparent; /* رنگ پس‌زمینه هنگام لمس موبایل */
}

.tag-box:hover {
    background-color: #F5F5DC; /* رنگ پس‌زمینه هاور */
    color: #cc9900; /* تغییر رنگ متن به زرد تیره */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* سایه برای هاور */
    transform: scale(1.05); /* بزرگ‌نمایی در هاور */
}

.tag-link {
    text-decoration: none; /* حذف خط زیر لینک */
    display: block; /* نمایش بلوکی برای لینک */
    color: inherit; /* ارث‌بری رنگ از والد */
}

/* نام دسته و برچسب */
.category-name,
.tag-name {
    font-weight: bold; /* ضخامت فونت */
    margin-bottom: 2px; /* فاصله پایین */
    color: inherit; /* ارث‌بری رنگ */
}

/* شمارنده‌ها */
.category-count,
.tag-count {
    font-weight: bold; /* ضخامت فونت */
    white-space: nowrap; /* جلوگیری از شکستن خط */
    display: block;
    margin-top: 2px; /* فاصله بالای شمارنده */
}

/* برچسب "محتوا" */
.category-box .count-label {
    color: #ffcc66; /* طلایی روشن برای دسته‌ها */
}

.tag-box .count-label {
    color: darkred; /* قرمز برای برچسب‌ها */
}