/* Enhanced styling for dynamic doctor cards */
.doctor-image {
  position: relative;
  overflow: hidden;
}

.image-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.availability {
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(5px);
}

.availability.available {
  color: #2e7d32;
  border: 1px solid #4caf50;
}

.availability.unavailable {
  color: #757575;
  border: 1px solid #bdbdbd;
}

.clinic-name {
  color: #1976d2 !important;
  font-weight: 600;
  font-size: 13px !important;
  margin: 5px 0 !important;
}

.fees {
  color: #388e3c !important;
  font-weight: 600;
  font-size: 13px !important;
}

/* Loading animation */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3079c7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Subtle doctor card hover effects */
.doctor-card:hover .doctor-image img {
  transform: scale(1.02);
}

.doctor-card:hover .image-overlay {
  transform: scale(1.01);
}

/* Responsive image loading */
.doctor-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
}

/* Error and loading states */
.loading-container, .error-container {
  background: #f8f9fa;
  border-radius: 15px;
  border: 2px dashed #ddd;
}

.error-container p {
  color: #757575 !important;
  font-weight: 600;
}

/* Enhanced button styles */
.contact-buttons button {
  position: relative;
  overflow: hidden;
}

/* Removed animated button effects for cleaner look */