/* ============================================================================
   x_css_form.css - Stile floating-label per i form del sito (Vers.03)
   Pattern usato in:
     /<lingua>/pag_registrazione_01.asp
     /<lingua>/pag_accedi.asp
     /<lingua>/pag_password_recupero.asp
     /<lingua>/pag_password_reset.asp
     /<lingua>/pag_registrazione_cambio_passw.asp
     /<lingua>/pag_richiedi_invito.asp
     /<lingua>/pag_registrazione_02_alberi.asp
   Uso: avvolgere ogni input con <div class="float-label"> e mettere la
   <label> DOPO l'input. L'input deve avere placeholder=" " (uno spazio).
   ============================================================================ */

.float-label {
    position: relative;
    margin-bottom: 16px;
}

.float-label > input,
.float-label > select {
    width: 100%;
    height: 60px;
    padding: 24px 14px 6px 14px;
    border: 1px solid #c5c8d2;
    border-radius: 6px;
    font-size: 17px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease-out;
    color: #333;
    font-family: inherit;
}

.float-label > input:focus,
.float-label > select:focus {
    border-color: #004540;
}

.float-label > input[readonly] {
    background: #ffefb4;
    color: #555;
    cursor: not-allowed;
}

.float-label > label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #888;
    font-size: 17px;
    pointer-events: none;
    transition: all 0.15s ease-out;
    background: #fff;
    padding: 0 4px;
    line-height: 1;
    margin-bottom: 0;
}

/* Quando l'input ha focus o ha valore, la label "vola" in alto a sx */
.float-label > input:focus + label,
.float-label > input:not(:placeholder-shown) + label,
.float-label > select:focus + label {
    top: 0;
    font-size: 12px;
    color: #004540;
    font-weight: 600;
}

/* Per <input readonly> con valore: la label e' gia' in alto (matcha
   :not(:placeholder-shown) perche' value non e' vuoto). Sfondo trasparente
   per non sovrapporsi al colore giallo del campo readonly. */
.float-label > input[readonly]:not(:placeholder-shown) + label {
    background: #ffefb4;
}

/* Variante select: :placeholder-shown non esiste, label sempre in alto */
.float-label.is-select > label {
    top: 0;
    font-size: 12px;
    color: #004540;
    font-weight: 600;
}
.float-label.is-select > select { padding-top: 24px; }

/* Variante date input: in Chrome il calendar-icon copre il placeholder */
.float-label.is-date > label {
    top: 0;
    font-size: 12px;
    color: #004540;
    font-weight: 600;
}
.float-label.is-date > input[type="date"] { padding-top: 24px; }

/* Stato errore (border + label rossi) */
.float-label.has-error > input,
.float-label.has-error > select { border-color: #dc3545; }
.float-label.has-error > label { color: #dc3545; }

/* Pulsante "occhio" per mostrare/nascondere password */
.float-label .toggle-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    z-index: 3;
}
.float-label.has-eye > input { padding-right: 48px; }