/**
 * Registration Form Enhancer CSS
 * Minimal styling for enhanced registration form
 */

/* Hidden fields transition */
.form-group.rfe-hidden,
.form-field.rfe-hidden,
.field.rfe-hidden {
    display: none;
}

/* Required field indicator */
.required-asterisk {
    color: #dc3545;
    font-weight: bold;
}

/* Hide optional text for required fields */
.form-group.rfe-required .form-control-comment,
.form-group.rfe-required .help-block,
.form-group.rfe-required .field-help,
.form-group.rfe-required .form-text,
.form-group.rfe-required .text-muted,
.form-group.rfe-required .optional-text {
    display: none !important;
}

/* Validation error messages */
.validation-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Simple horizontal layout for gender selection */
.gender-selection {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    list-style: none;
}

.gender-selection .form-check,
.gender-selection .radio {
    margin-right: 0;
    margin-bottom: 0;
    list-style: none;
}

/* Remove bullets from form elements - but preserve form layout */
.form-group.rfe-required,
.form-group.rfe-required *,
.gender-selection,
.gender-selection * {
    list-style: none !important;
    list-style-type: none !important;
}

/* Remove only unwanted pseudo-element content (red dots) but keep layout */
.form-group.rfe-required label::before,
.form-group.rfe-required label::after,
.form-group.rfe-required .form-control-label::before,
.form-group.rfe-required .form-control-label::after {
    content: none !important;
}

/* Fix for double dots only on module-managed fields with rfe-required class */
.form-group.rfe-required::after,
.form-group.rfe-required::before,
.form-group.rfe-required label::after,
.form-group.rfe-required label::before,
div.form-group.row.rfe-required::after,
div.form-group.row.rfe-required::before {
    content: none !important;
    display: none !important;
}

/* Remove gender selection pseudo-elements that might create dots */
.gender-selection::before,
.gender-selection::after,
.gender-selection *::before,
.gender-selection *::after {
    list-style: none !important;
    list-style-type: none !important;
    content: none !important;
}

/* Simple visual improvement for buttons - minimal */
.gender-selection input[type="radio"] + label {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: #f8f9fa;
}

.gender-selection input[type="radio"]:checked + label {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.gender-selection input[type="radio"] {
    margin-right: 8px;
}

/* Mobile: stack vertically on very small screens */
@media (max-width: 480px) {
    .gender-selection {
        flex-direction: column;
        gap: 8px;
    }
}

/* Layout fix for form groups - ensures proper width and clearing */
.form-group.row {
    width: 100%;
    clear: both;
}

/* Ensure module-managed fields maintain proper layout */
.form-group.rfe-required.row,
.form-group.rfe-optional.row {
    width: 100%;
    clear: both;
}