Comprehensive Blood Testing

/* --- Filter Bar --- */ .filter-bar { display: flex; gap: 10px; justify-content: center; margin-bottom: 35px; flex-wrap: wrap; background: #f0fdfa; border-radius: 84px; } .filter-btn { background: #F2FBF9; border: none; padding: 10px 25px; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; font-family: "Inter", sans-serif; font-size: 14px; color: #1a202c; } .filter-btn.active, .filter-btn:hover { background: #fff; color: #000; }/* --- Card Grid --- */ .blood-tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }@media (max-width: 1024px) { .blood-tests { grid-template-columns: repeat(2, 1fr); } }@media (max-width: 640px) { .blood-tests { grid-template-columns: 1fr; } }/* --- Card --- */ .blood-test-card { border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; padding: 25px 25px 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: all 0.3s ease; text-align: left; } .blood-test-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.08); } .blood-test-card h3, #modalTitle, #modalDetails h2 { text-align: left; font-family: "Inter", Sans-serif; font-size: 16px; font-weight: 400; color: #1A202C; text-transform: capitalize; margin: 0; } .blood-test-card p, #modalDetails p { font-family: "Inter", sans-serif; font-size: 14px; color: #64748B; line-height: 22px; margin: 5px 0px 2px 0px; text-align: left; }/* --- View Details Link --- */ .view-details-link { display: inline-block; font-family: "Inter", sans-serif; font-size: 14px; color: #0D9488; text-decoration: underline; cursor: pointer; margin-bottom: 15px; }/* --- Meta Info --- */ .test-meta { display: flex; align-items: center; justify-content: flex-start; gap: 20px; font-size: 14px; color: #1A202C; margin-bottom: 5px; } .test-meta span { display: flex; align-items: center; gap: 6px; font-family: "Inter", Sans-serif; font-size: 14px; color: #64748B; } .test-meta i { color: #0D9488; }/* --- Preparation Text --- */ .prep { font-family: "Inter", sans-serif; font-size: 14px; color: #0D9488; margin: 10px 0 20px; }/* --- Button --- */ .book-btn { background-color: #0D9488; font-family: "Inter", Sans-serif; font-size: 14px; font-weight: 400; color: #FFFFFF; border-radius: 50px; padding: 10px 20px; display: inline-block; text-align: center; text-decoration: none; transition: background-color 0.3s ease; display: block; } .book-btn:hover { background-color: #0f766e; }/* --- Modal --- */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 999; padding: 20px; } .modal-content { background: #fff; padding: 30px; border-radius: 12px; width: 100%; max-width: 600px; position: relative; max-height: 90vh; overflow-y: auto; } .modal-close { position: absolute; top: 10px; right: 15px; font-size: 22px; cursor: pointer; color: #333; } #modalDetails { text-align: left; margin-top: 20px; } .blood-test-title, .blood-test-card .blood-test-title { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; color: #1A202C; margin: 0 0 4px 0; } document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.filter-btn'); const cards = document.querySelectorAll('.blood-test-card'); const modal = document.getElementById('testModal'); const modalTitle = document.getElementById('modalTitle'); const modalDetails = document.getElementById('modalDetails'); const modalBookLink = document.getElementById('modalBookLink'); const modalClose = document.querySelector('.modal-close');// Filter Functionality buttons.forEach(btn => { btn.addEventListener('click', () => { buttons.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const filter = btn.dataset.filter;cards.forEach(card => { if (filter === 'all' || card.classList.contains(filter)) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); });// Modal View Details document.querySelectorAll('.view-details-link').forEach(link => { link.addEventListener('click', e => { const card = e.target.closest('.blood-test-card'); modalTitle.textContent = card.dataset.title; modalDetails.innerHTML = card.dataset.details || 'No details available.'; modalBookLink.href = card.dataset.booklink; modal.style.display = 'flex'; }); });modalClose.addEventListener('click', () => modal.style.display = 'none'); modal.addEventListener('click', e => { if (e.target === modal) modal.style.display = 'none'; }); });