/* Fix for jumbled text in wfaces inputText component */
.w-input-text input,
.w-slot input,
.w-slot input[type="text"],
.w-slot input[type="email"],
input.ui-inputfield,
.ui-inputtext,
.w-input-text .ui-inputtext,
input[id*="input"] {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-kerning: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure input text is not compressed */
.w-slot .ui-inputfield,
.w-input-text input {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* wfaces b-input floatlabel overlap fix.
   Root cause: wfaces only adds .b-input--has-content class on page load (when value pre-filled),
   not dynamically while the user types. So the label stays in full-size position and overlaps
   the typed text. Fix: use :focus-within and :has(input[value]) to force the "has-content" state
   via pure CSS. Also handle autofill which never triggers wfaces JS. */

/* Shrink the label like .b-input--has-content does when input is focused, filled, or autofilled */
.b-input--has-floatlabel:focus-within .b-input__label,
.b-input--has-floatlabel:has(input:not([value=""])) .b-input__label,
.b-input--has-floatlabel:has(input:-webkit-autofill) .b-input__label {
    padding-top: .75em !important;
    padding-bottom: 0 !important;
    font-size: .75em !important;
    line-height: 1 !important;
}

/* Make room in the input for the shrunken label */
.b-input--has-floatlabel:focus-within .b-input__input,
.b-input--has-floatlabel:has(input:not([value=""])) .b-input__input,
.b-input--has-floatlabel:has(input:-webkit-autofill) .b-input__input {
    border-top: 1.5em solid transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Disable yellow autofill background so typed text is readable */
.b-input__input:-webkit-autofill,
.b-input__text-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #000 !important;
}