.filter-buttons-container {
    gap: 8px;
}

.package-group-btn {
    background-color: #ffeb3b;
    color: #000;
    border: 1px solid #000;
    font-size: 12px;
    border-radius: 20px;
    padding: 6px 16px;
    transition: all 0.3s ease;
    flex: 0 1 auto;
    white-space: nowrap;
}

    .package-group-btn:hover,
    .package-group-btn:focus,
    .package-group-btn.active {
        background-color: #fbc02d;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

/* دسکتاپ - همه دکمه‌ها در یک خط */
@media (min-width: 992px) {
    .filter-buttons-container {
        justify-content: flex-start;
    }

    .package-group-btn {
        flex: 0 0 auto;
    }
}

/* تبلت - حداکثر 3 دکمه در هر خط */
@media (max-width: 991px) and (min-width: 576px) {
    .package-group-btn {
        flex: 0 0 calc(33.333% - 8px);
        text-align: center;
        white-space: normal;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* موبایل - 2 دکمه در هر خط اگر جا شود، در غیر این صورت 1 دکمه */
@media (max-width: 575px) {
    .package-group-btn {
        flex: 0 0 calc(50% - 8px);
        text-align: center;
        white-space: normal;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* اگر دکمه‌ها خیلی عریض باشند، یک دکمه در هر خط */
    @media (max-width: 400px) {
        .package-group-btn {
            flex: 0 0 100%;
        }
    }
}