/* Custom Clinic Styles */

:root {
    --clinical-blue: #007BFF;
    --clinical-dark: #0056b3;
}

/* Animations */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bounceSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in { animation: fadeIn 1s ease-out forwards; }
.animate-scale-up { animation: scaleUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bounce-slow { animation: bounceSlow 3s ease-in-out infinite; }

/* Service Cards */
.service-card {
    @apply p-10 rounded-[2.5rem] bg-white border border-slate-100 transition-all duration-500 hover:shadow-2xl hover:shadow-clinical-blue/10 hover:-translate-y-2;
}

.service-icon {
    @apply w-16 h-16 rounded-2xl bg-clinical-light text-clinical-blue flex items-center justify-center text-3xl mb-8 transition-colors group-hover:bg-clinical-blue group-hover:text-white;
}

/* Filter Buttons */
.filter-btn {
    @apply px-8 py-3 rounded-full text-sm font-bold transition-all border border-transparent;
}

.filter-btn.active {
    @apply bg-clinical-blue text-white shadow-lg shadow-clinical-blue/20;
}

.filter-btn:not(.active) {
    @apply bg-slate-50 text-slate-500 hover:bg-slate-100;
}

/* Booking Inputs */
.booking-input {
    @apply w-full px-6 py-4 rounded-xl bg-slate-50 border border-slate-100 focus:bg-white focus:border-clinical-blue focus:ring-4 focus:ring-clinical-blue/10 transition-all outline-none text-slate-900 font-medium;
}

/* Doctor Cards */
.doctor-card {
    @apply transition-all duration-500;
}

.view-bio-btn {
    @apply text-clinical-blue font-bold text-sm border-b-2 border-clinical-blue/20 hover:border-clinical-blue transition-all pb-1;
}

/* FAQ Items */
.faq-item {
    @apply bg-white rounded-2xl border border-slate-100 overflow-hidden transition-all duration-300;
}

.faq-trigger {
    @apply w-full flex items-center justify-between p-6 text-left font-bold text-slate-900 transition-colors hover:text-clinical-blue;
}

.faq-content {
    @apply max-h-0 overflow-hidden transition-all duration-500 ease-in-out;
}

.faq-item.active {
    @apply border-clinical-blue/20 shadow-xl shadow-clinical-blue/5;
}

.faq-item.active .faq-content {
    @apply max-h-96;
}

.faq-item.active .fa-plus {
    @apply rotate-45;
}

/* Modal styles handled by JS classes */
.modal-open {
    @apply overflow-hidden pr-[var(--scrollbar-width)];
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}