// ═══ ابدأ النسخ من هنا ═══

<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden"> <div class="relative"> <img src="https://صورة-الخبير.jpg" alt="اسم الخبير" class="w-full h-56 object-cover object-top" /> <div class="absolute bottom-4 right-4 bg-[var(--primary-color)] text-white text-xs px-3 py-1 rounded-full">متاح الآن</div> </div> <div class="p-5"> <h3 class="text-xl font-bold text-[var(--dark-text-color)] mb-1">اسم الخبير</h3> <p class="text-[var(--primary-color)] font-medium text-sm mb-2">التخصص</p> <p class="text-[var(--gray-text-color)] text-sm mb-4 leading-relaxed">وصف الخبير</p> <div class="flex items-center justify-between mb-4"> <div> <span class="text-2xl font-bold text-[var(--accent-color)]">السعر</span> <span class="text-sm text-gray-500">ريال/ساعة</span> </div> <div class="flex items-center gap-1"> <svg class="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <span class="text-sm text-gray-600">5.0</span> </div> </div> <a href="/booking-form?doctor=معرف-الحجز&price=السعر" class="block w-full bg-gradient-to-r from-[var(--primary-color)] to-[#1a4a70] text-white text-center py-3 rounded-xl font-bold hover:shadow-lg transition-all transform hover:scale-[1.02]">احجز الآن</a> </div> </div>

// ═══ انتهى هنا ═══