{{-- Skeleton Loader for Listing Card --}}
<div class="bg-white dark:bg-gray-800 rounded-lg sm:rounded-xl shadow-lg overflow-hidden animate-pulse">
    {{-- Image Skeleton --}}
    <div class="w-full h-44 sm:h-48 lg:h-40 bg-gray-200 dark:bg-gray-700"></div>

    <div class="p-3 sm:p-4">
        {{-- Tags Skeleton --}}
        <div class="flex gap-1 sm:gap-1.5 mb-2">
            <div class="w-16 h-5 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
            <div class="w-20 h-5 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
        </div>

        {{-- Title Skeleton --}}
        <div class="h-5 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2"></div>

        {{-- Description Skeleton --}}
        <div class="space-y-1 mb-3">
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-full"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
        </div>

        {{-- Rating Skeleton --}}
        <div class="flex items-center gap-1 mb-3">
            <div class="flex gap-0.5">
                @for($i = 0; $i < 5; $i++)
                    <div class="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded"></div>
                @endfor
            </div>
            <div class="w-8 h-3 bg-gray-200 dark:bg-gray-700 rounded ml-1"></div>
        </div>

        {{-- Price Skeleton --}}
        <div class="flex items-center justify-between pt-2 sm:pt-3 border-t border-gray-100 dark:border-gray-700">
            <div class="w-24 h-6 bg-gray-200 dark:bg-gray-700 rounded"></div>
            <div class="w-16 h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
        </div>
    </div>
</div>