/**
 * Force text color to be visible in appointment details
 * This ensures all text is black/dark and visible
 */

/* Force text color on all form elements */
#mbs-booking-form-react,
#mbs-booking-form-react * {
    color: #111827 !important;
}

/* But allow placeholders to be gray */
#mbs-booking-form-react input::placeholder,
#mbs-booking-form-react select::placeholder,
#mbs-booking-form-react textarea::placeholder {
    color: #9ca3af !important;
}

/* Ensure button text is visible - highest priority */
#mbs-booking-form-react button,
#mbs-booking-form-react button span,
#mbs-booking-form-react button *,
#mbs-booking-form-react button[type="button"],
#mbs-booking-form-react button[type="button"] span,
#mbs-booking-form-react button[type="button"] * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Ensure selected values in dropdowns are visible */
#mbs-booking-form-react [role="button"],
#mbs-booking-form-react [role="button"] span,
#mbs-booking-form-react [role="button"] * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Override any transparent or white text */
#mbs-booking-form-react * {
    -webkit-text-fill-color: #111827 !important;
}

/* Ensure labels are visible */
#mbs-booking-form-react label {
    color: #374151 !important;
}

/* Fix for React component text */
#mbs-booking-form-react span {
    color: #111827 !important;
}

/* Ensure all text inputs have visible text */
#mbs-booking-form-react input[type="text"],
#mbs-booking-form-react input[type="email"],
#mbs-booking-form-react input[type="tel"],
#mbs-booking-form-react input[type="date"],
#mbs-booking-form-react input[type="time"] {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}