/**
 * Schedule Button - Core Styling
 * This is the ONLY CSS that should style the schedule button
 * No JavaScript should modify the button styling
 */

/* Base styling */
.schedule-consultation-btn {
  /* Essential display properties */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  
  /* Colors */
  color: white !important;
  background-color: #8a2dd3 !important; /* Hardcoded for consistency */
  
  /* Shape and size */
  border-radius: 50px !important;
  padding: 0.5rem 1.2rem !important;
  margin-left: 0.5rem !important;
  border: none !important;
  
  /* Typography */
  font-weight: 600 !important;
  
  /* Effects */
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  
  /* Ensure clickable */
  position: relative !important;
  z-index: 100 !important;
}

/* Hover state */
.schedule-consultation-btn:hover {
  background-color: #7026b9 !important; /* Darker purple */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  color: white !important;
}

/* Active/focused state */
.schedule-consultation-btn:active,
.schedule-consultation-btn:focus {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
  color: white !important;
}

/* Icon spacing */
.schedule-consultation-btn i {
  margin-right: 0.5rem !important;
}

/* Mobile optimizations */
@media (max-width: 991.98px) {
  .schedule-consultation-btn {
    margin: 0.5rem 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
}