#crf-multistep-form-container {
    margin: 20px auto;
}

.crf-step {
    margin-bottom: 20px;
}
#crf-registration-form .crf-step .stepFormHeading {
    font-size: 1.5em;
    font-weight:600;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

#crf-registration-form label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

#crf-registration-form input[type="text"],
#crf-registration-form input[type="email"],
#crf-registration-form input[type="tel"],
#crf-registration-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Important for 100% width */
}

#crf-registration-form input[type="file"] {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.custom-file-upload {
    /* You can style this to look like a button if you hide the default file input */
}

.fileUpload {
    /* Style for file inputs */
}

#crf-registration-form .form-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px; /* Space between columns */
}

#crf-registration-form .form-row {
    flex: 1; /* Each row takes equal space */
    min-width: 250px; /* Minimum width before wrapping */
}

#crf-registration-form .form-row label,
#crf-registration-form .form-row input,
#crf-registration-form .form-row select {
    width: 100%; /* Make elements within form-row take full width of the column */
}


#crf-registration-form button,
#crf-registration-form input[type="submit"] {
    background-color: #0073aa; /* WordPress blue */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#crf-registration-form button:hover,
#crf-registration-form input[type="submit"]:hover {
    background-color: #005a87;
}

#crf-registration-form button.crf-prev-step {
    background-color: #6c757d;
    margin-right: 10px;
}

#crf-registration-form button.crf-prev-step:hover {
    background-color: #5a6268;
}

.crf-required {
    color: red;
    margin-left: 2px;
}

#crf-form-messages {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

#crf-form-messages.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#crf-form-messages.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#crf-form-messages ul {
    margin: 0;
    padding-left: 20px;
}

.crf-field-error {
    color: red;
    font-size: 0.9em;
    display: block; /* Or inline-block if preferred */
    margin-top: -5px; /* Adjust as needed */
    margin-bottom: 5px; /* Adjust as needed */
}

#crf-loader {
    margin-left: 10px;
    font-style: italic;
}
.crf-step-indicators {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.crf-step-indicator {
    display: flex;
    flex-direction: column; /* Stack number and label */
    align-items: center;
    color: #aaa;
    font-size: 0.9em;
    flex: 1;
    text-align: center;
    padding: 5px;
    position: relative; /* For pseudo-elements if needed for lines */
}

.crf-step-indicator .step-number {
    display: inline-flex; /* Changed from inline-block for better alignment */
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #eee;
    color: #aaa;
    font-weight: bold;
    margin-bottom: 5px; /* Space between number and label */
    border: 2px solid #eee;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.crf-step-indicator .step-label {
    font-size: 0.9em;
}

.crf-step-indicator.active .step-number {
    background-color: #0073aa; /* WordPress blue */
    color: #fff;
    border-color: #0073aa;
}
.crf-step-indicator.active .step-label {
    color: #0073aa;
    font-weight: bold;
}

.crf-step-indicator.completed .step-number {
    background-color: #28a745; /* Green for completed */
    color: #fff;
    border-color: #28a745;
}
.crf-step-indicator.completed .step-label {
    color: #28a745;
}

/* Style for navigation buttons container */
.crf-navigation-buttons {
    margin-top: 20px;
    text-align: right; /* Or flex for more complex layouts */
}
.crf-navigation-buttons button.crf-prev-step {
    float: left; /* Simple alignment for prev button */
}