/* ==========================================================================
   Book Consultation section
   Reuses the site's existing .contact-panel (card), .form-control (inputs/
   selects) and .btn-primary (button) styles for full visual consistency.
   This file only adds the small bits those don't already cover.
   ========================================================================== */

.book-consultation-section {
  position: relative;
}

/* Subtle entrance animation for the card */
.book-consultation-card {
  animation: bookConsultationFadeUp 0.6s ease both;
}

@keyframes bookConsultationFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Field labels above each input */
.book-consultation-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
}

/* Doctor field before a department is chosen */
.book-consultation-card select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Smooth hover lift on the submit button, on top of the site's existing
   .btn-primary color/background hover state */
.book-consultation-submit {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.book-consultation-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(var(--color-primary-rgb), 0.35);
}
.book-consultation-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Small inline spinner shown on the button while submitting */
.book-consultation-submit .btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: bookConsultationSpin 0.7s linear infinite;
}

@keyframes bookConsultationSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Field-level validation messages */
.book-consultation-card .field-error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #dc3545;
}
.book-consultation-card .is-invalid ~ .field-error,
.book-consultation-card .field-error.show {
  display: block;
}
.book-consultation-card .is-invalid {
  border-color: #dc3545 !important;
}

/* Result message spacing/animation */
.book-consultation-result:empty {
  margin-top: 0;
}
.book-consultation-result .alert {
  animation: bookConsultationFadeUp 0.35s ease both;
}

/* Responsive polish - roomier padding on small screens where .contact-panel's
   default 60px padding (defined site-wide) would feel cramped */
@media (max-width: 767.98px) {
  .book-consultation-card.contact-panel {
    padding: 30px 20px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .book-consultation-card.contact-panel {
    padding: 40px;
  }
}