/**
 * Form Field Label Fix CSS
 * Minimal CSS to support JavaScript form functionality
 */

/* Smooth transitions for when JavaScript handles the changes */
.form-field-label {
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 2; /* ensure label sits above input */
}

/* Ensure proper stacking order */
.form-field {
    position: relative;
}

.form-field input,
.form-field textarea,
.form-field select {
    background: var(--background-color);
}

/* Force labels to render above inputs (disable floating overlay) */
.form-field .form-field-label {
    position: static;
    display: block;
    width: auto;
    padding: 0 0 .375rem 0;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Ensure labels remain visible even when inputs receive focus */
.form-field.focus .form-field-label,
.form-field-group.focus .form-field-label {
    opacity: 1;
    visibility: visible;
    transform: none;
}