/* Floating-label form fields — SINGLE SOURCE OF TRUTH for web forms (login, contact form, ...).
   Theme: primary #8754A1, muted #8898AA, text #32325D.

   Two float triggers are supported so any form can use whichever fits its markup:
   - CSS sibling (`:placeholder-shown` / `:focus ~`): for forms where the input and label are direct
     siblings (e.g. the contact form). The input must carry placeholder=" ".
   - `.is-floated` / `.is-focused` classes (set in JS): for forms where the input is nested in a
     wrapper that breaks the sibling link (e.g. the login: .input-group / intlTelInput .iti).

   Canonical classes are `.fl-field` / `.fl-input` / `.fl-label`. The contact form's legacy `.cf-*`
   classes (scoped under `.cf-form`) are grouped into the same rules so this file is the single source
   of the spacing/visual; they can be renamed to `.fl-*` in a later cleanup without changing any value. */

.fl-field,
.cf-form .cf-field { position: relative; margin-bottom: 1rem; }

.fl-input.form-control,
.cf-form .cf-input.form-control {
    height: calc(1.5em + 1.7rem + 2px);
    padding: 1.05rem .9rem .35rem;   /* top / right+left .9rem (comfortable) / bottom */
    font-size: .95rem;
    line-height: 1.2;
}
textarea.fl-input.form-control,
.cf-form textarea.cf-input.form-control { height: auto; min-height: 5.5rem; padding-top: 1.45rem; }

.fl-label,
.cf-form .cf-label {
    position: absolute;
    top: 4px; left: -4px;
    margin: 0;
    padding: .85rem .95rem;
    max-width: 100%;
    font-size: .95rem;
    color: #8898AA;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
    transform-origin: 0 0;
    z-index: 4; /* above a focused input — Bootstrap raises .input-group > .form-control:focus to z-index 3 */
    transition: transform .15s ease, color .15s ease;
}

/* Floated state — CSS sibling (placeholder-shown / focus) OR a JS .is-floated class. */
.fl-input:not(:placeholder-shown) ~ .fl-label,
.fl-field.is-floated .fl-label,
.cf-form .cf-input:not(:placeholder-shown) ~ .cf-label { transform: translateY(-.62rem) scale(.72); }
.fl-input:focus,
.cf-form .cf-input:focus { border-color: #8754A1; box-shadow: 0 0 0 .15rem rgba(135, 84, 161, .15); }
.fl-input:focus ~ .fl-label,
.fl-field.is-focused .fl-label,
.cf-form .cf-input:focus ~ .cf-label { transform: translateY(-.62rem) scale(.72); color: #8754A1; }

/* Invalid state (forms that toggle .is-invalid on the field). */
.fl-field.is-invalid .fl-input.form-control,
.cf-form .cf-field.is-invalid .cf-input.form-control { border-color: #FF5630; }
.fl-field.is-invalid .fl-input:focus,
.cf-form .cf-field.is-invalid .cf-input:focus { box-shadow: 0 0 0 .15rem rgba(255, 86, 48, .15); }
.fl-field.is-invalid .fl-label,
.cf-form .cf-field.is-invalid .cf-label { color: #FF5630; }

/* Password field: room for an absolutely-positioned toggle (the eye) over the input. */
.fl-field--password .fl-input { padding-right: 2.6rem; }
.fl-field--password .fl-pwd-toggle {
    position: absolute; top: 0; right: 0; height: 100%;
    display: flex; align-items: center; padding: 0 .85rem;
    color: #8898AA; cursor: pointer;
}

/* Browser autofill: Chrome/Safari/Edge fill without firing input and hide the value from JS until the
   user interacts. The animation fires on :-webkit-autofill so JS can re-float the label; the inset
   box-shadow neutralizes the blue/yellow tint so the field stays clean.
   Note: Chrome renders autofilled text at its own size (slightly different from .fl-input) until the
   first interaction; that is a browser quirk not reliably overridable from CSS, left as-is (minor, it
   self-corrects on the first click). */
@keyframes flOnAutofill { from {} to {} }
.fl-input:-webkit-autofill,
.cf-form .cf-input:-webkit-autofill {
    animation-name: flOnAutofill;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #32325D;
}

/* intlTelInput fields with a VISIBLE flag (login key, register national id). The widget wraps the input
   in .iti (breaking the sibling link, so these use the JS float), shows the flag on the left, and the
   label sits to the right of it so it never overlaps the flag. The contact form hides its flag and keeps
   its own iti rules in contact-form.css. */
.iti__country-list { z-index: 1061; } /* dropdown above the floating labels and the footer modal */
.fl-field--iti .iti { display: block; width: 100%; }
.fl-field--iti .fl-label--iti { left: 44px; }

/* Compact variant — tighter inputs for dense forms (the register form, which also lives in the home hero
   card). Same look, smaller rhythm. */
.fl-field--sm .fl-input.form-control {
    height: calc(1.5em + 1.1rem + 2px);
    /* Longhand top/bottom only — NOT a shorthand: setting padding-left here (specificity 0,3,0) would beat
       intlTelInput's `.iti--allow-dropdown input[type=text]` (0,2,1) and the value would overlap the flag on
       the national-id field. Left/right come from the base .fl-input rule; intlTelInput sets the flag's
       padding-left on .fl-field--iti. */
    padding-top: .85rem;
    padding-bottom: .15rem;
    font-size: .85rem;
}
.fl-field--sm .fl-label { padding: .58rem .75rem; font-size: .85rem; }
.fl-field--sm.is-floated .fl-label,
.fl-field--sm .fl-input:not(:placeholder-shown) ~ .fl-label,
.fl-field--sm.is-focused .fl-label,
.fl-field--sm .fl-input:focus ~ .fl-label { transform: translateY(-.46rem) scale(.74); }
.fl-field--sm.fl-field--iti .fl-label--iti { left: 40px; }