Hotel Booking Card with Price Breakdown

<div class="max-w-sm mr-auto ml-auto">
      <section class="relative overflow-hidden bg-slate-900/30 border-slate-700/50 border rounded-3xl shadow-2xl backdrop-blur-xl">
        
        <!-- Image -->
        <div class="pt-4 pr-4 pb-4 pl-4">
          <div class="relative overflow-hidden rounded-2xl">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7a0ca021-7ce3-4405-9594-5fc2e619418b_800w.jpg" alt="Luxury hotel suite" class="w-full h-40 object-cover">
            
            <!-- Overlay controls -->
            <div class="absolute inset-3 flex items-start justify-between">
              <div class="flex items-center gap-1.5 rounded-full bg-black/40 backdrop-blur-md px-2.5 py-1.5 border border-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-slate-300"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>
                <span class="text-xs font-medium text-white">NYC</span>
              </div>
              
              <button id="likeBtn" class="size-8 rounded-full bg-black/40 backdrop-blur-md border border-white/10 flex items-center justify-center hover:bg-black/60 transition">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" id="likeIcon" class="text-white"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
              </button>
            </div>
          </div>
        </div>

        <!-- Content -->
        <div class="pr-4 pb-4 pl-4">
          <div class="flex items-start justify-between mb-3">
            <div>
              <h2 class="text-lg font-semibold text-white tracking-tight">Grand Metropolitan</h2>
              <div class="flex items-center gap-2 mt-0.5">
                <span class="text-xs text-slate-400">5-Star Suite</span>
                <span class="inline-flex items-center rounded-full bg-green-500/20 text-green-400 text-xs px-2 py-0.5 border border-green-500/30">
                  Available
                </span>
              </div>
            </div>
            <div class="text-right">
              <p class="text-lg font-semibold text-white tracking-tight">$340</p>
              <p class="text-xs text-slate-500">per night</p>
            </div>
          </div>

          <!-- Description -->
          <p class="text-sm text-slate-400 mb-4 leading-relaxed">Luxurious suite with panoramic city views, marble bathroom, and premium amenities in the heart of Manhattan.</p>

          <!-- Amenities -->
          <div class="mb-4">
            <h3 class="text-sm font-medium text-white mb-2">Amenities</h3>
            <div class="grid grid-cols-2 gap-2">
              <div class="flex items-center gap-2 text-xs text-slate-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7"></path><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path></svg>
                <span>King Bed</span>
              </div>
              <div class="flex items-center gap-2 text-xs text-slate-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12V6a6 6 0 0 1 12 0v6"></path><path d="M3 12h18l-2 8H5l-2-8Z"></path></svg>
                <span>Spa Bath</span>
              </div>
              <div class="flex items-center gap-2 text-xs text-slate-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"></path><path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg>
                <span>Free WiFi</span>
              </div>
              <div class="flex items-center gap-2 text-xs text-slate-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect><path d="M9 22v-4h6v4"></path><path d="M8 6h.01"></path><path d="M16 6h.01"></path><path d="M12 6h.01"></path><path d="M12 10h.01"></path><path d="M12 14h.01"></path><path d="M16 10h.01"></path><path d="M16 14h.01"></path><path d="M8 10h.01"></path><path d="M8 14h.01"></path></svg>
                <span>City View</span>
              </div>
            </div>
          </div>

          <!-- Check-in dates -->
          <div class="mb-4">
            <h3 class="text-sm font-medium text-white mb-2">Selected Dates</h3>
            <div class="flex items-center gap-3 p-2.5 bg-slate-800/40 rounded-xl border border-slate-700/40">
              <div class="flex-1">
                <p class="text-xs text-slate-400">Check-in</p>
                <p class="text-sm font-medium text-white">Dec 15</p>
              </div>
              <div class="w-px h-8 bg-slate-700/50"></div>
              <div class="flex-1">
                <p class="text-xs text-slate-400">Check-out</p>
                <p class="text-sm font-medium text-white">Dec 18</p>
              </div>
              <div class="w-px h-8 bg-slate-700/50"></div>
              <div class="flex-1">
                <p class="text-xs text-slate-400">Nights</p>
                <p class="text-sm font-medium text-white">3</p>
              </div>
            </div>
          </div>

          <!-- Divider -->
          <div class="h-px bg-gradient-to-r from-transparent via-slate-700/50 to-transparent mb-4"></div>

          <!-- Price breakdown -->
          <div class="mb-4 space-y-2">
            <div class="flex items-center justify-between text-sm">
              <span class="text-slate-400">$340 × 3 nights</span>
              <span class="text-white">$1,020</span>
            </div>
            <div class="flex items-center justify-between text-sm">
              <span class="text-slate-400">Service fee</span>
              <span class="text-white">$51</span>
            </div>
            <div class="flex items-center justify-between text-sm">
              <span class="text-slate-400">Taxes</span>
              <span class="text-white">$89</span>
            </div>
            <div class="h-px bg-slate-700/40 my-2"></div>
            <div class="flex items-center justify-between font-medium">
              <span class="text-white">Total</span>
              <span class="text-white text-lg">$1,160</span>
            </div>
          </div>

          <div class="flex items-center justify-between">
            <!-- Rating -->
            <div class="flex items-center gap-2">
              <div class="flex -space-x-1.5">
                <img class="size-6 rounded-full ring-1 ring-slate-700 object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=100&amp;auto=format&amp;fit=crop" alt="" style="">
                <img class="size-6 rounded-full ring-1 ring-slate-700 object-cover" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&amp;w=100&amp;auto=format&amp;fit=crop" alt="">
                <div class="size-6 rounded-full bg-slate-700/70 backdrop-blur ring-1 ring-slate-600 flex items-center justify-center">
                  <span class="text-xs text-slate-300">+8</span>
                </div>
              </div>
              <div class="flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-amber-500"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
                <span class="text-xs font-medium text-slate-300">4.9</span>
              </div>
            </div>

            <button class="px-5 py-2.5 bg-white hover:bg-slate-100 text-slate-900 rounded-xl text-sm font-medium transition shadow-lg">
              Reserve
            </button>
          </div>
        </div>
      </section>
    </div>