/* General Form Container Styling */
.client-form-container {
    margin-left: 5%;
    padding: 20px;
    border-radius: 4px;
    max-width: 90%;
}

.section-primary {
    background-color: var(--color-primary);
    color: var(--color-light);
}

.section-secondary {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

/* Form Group Styling */
.form-group {
    margin-bottom: 10px;
    padding: 2px 0;
    background-color: var(--color-muted);
    border: 1px solid var(--color-dark);
    display: block;
}

/* Label Styling - Left Align */
.form-group label {
    font-weight: bold;
    color: var(--color-dark);
}

/* Checkbox and Label Inline Styling */
.checkbox-group {
    display: flex;
    gap: 40px; /* Increased gap for spacing columns */
}

.checkbox-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000; /* Text color for answer options */
}

/* Conditional Input Field for Child Pages */
.conditional-input label {
    margin-left: 10px;
}

.conditional-input input[type="number"] {
    width: 60px;
    padding: 2px 4px;
}

/* Right-aligned labels for checkboxes */
.checkbox-column .form-group-inline label {
    order: 1;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .checkbox-group {
        flex-direction: column;
    }
    .checkbox-column {
        width: 100%;
    }
    .form-group input, .form-group select {
        width: 100%;
    }
}