{{-- Skeleton Loader for Listing Details --}}
<div class="animate-pulse">
    {{-- Image Gallery Skeleton --}}
    <div class="mb-6 sm:mb-8 rounded-xl overflow-hidden bg-gray-200 dark:bg-gray-700">
        <div class="w-full" style="padding-bottom: 56.25%"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
        {{-- Main Content --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Title & Price --}}
            <div>
                <div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-3"></div>
                <div class="flex items-center gap-4">
                    <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
                    <div class="h-5 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
                </div>
            </div>

            {{-- Tags --}}
            <div class="flex flex-wrap gap-2">
                @for($i = 0; $i < 4; $i++)
                    <div class="h-8 bg-gray-200 dark:bg-gray-700 rounded-full w-24"></div>
                @endfor
            </div>

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

            {{-- Amenities --}}
            <div>
                <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-4"></div>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @for($i = 0; $i < 6; $i++)
                        <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
                    @endfor
                </div>
            </div>
        </div>

        {{-- Booking Form Skeleton --}}
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 space-y-4">
                <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-4"></div>

                {{-- Calendar Skeleton --}}
                <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>

                {{-- Fields --}}
                @for($i = 0; $i < 3; $i++)
                    <div>
                        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2"></div>
                        <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
                    </div>
                @endfor

                {{-- Button --}}
                <div class="h-12 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
            </div>
        </div>
    </div>
</div>