/* ============================================================
   CDM · Form di autenticazione e recovery (card style)
   Componente condiviso fra:
     - AUTH-06 "Accedi ID Azienda" (auth/strongauth/accedi.html)
     - PWD-04 "Recupera password" (password/recovery*.html)
   Stile fedele ai Figma:
     - docs/figma/Accedi ID Azienda.png
     - docs/figma/Recupera password.png
     - docs/figma/Cambio Password - Post Login ID Azienda.png
   Consuma token --cdm-* da bootstrap-italia-cdm.css
   Caricato DOPO bootstrap-italia.min.css + bootstrap-italia-cdm.css
   ============================================================ */

/* ── Card form centrata ─────────────────────────────────────── */
.cdm-auth-card {
    max-width: 380px;
    margin: 2rem 0;
    padding: 2rem 2rem 1.75rem;
    background-color: var(--cdm-bg-white);
    border: 1px solid var(--cdm-border-separator-light);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.cdm-auth-field {
    margin-bottom: 1.5rem;
}

.cdm-auth-field label {
    display: block;
    font-weight: var(--cdm-font-weight-semibold);
    font-size: var(--cdm-font-size-form);
    color: var(--cdm-text-title);
    margin-bottom: 0.25rem;
}

/* Input "underline-style" — nessun bordo, solo riga sotto, focus rosso */
.cdm-auth-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--cdm-border-separator-medium);
    padding: 0.5rem 0;
    font-size: var(--cdm-font-size-2);
    background-color: transparent;
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

.cdm-auth-input:focus {
    border-bottom: 2px solid var(--cdm-brand-primary-accent);
    padding-bottom: calc(0.5rem - 1px);
}

.cdm-auth-input::placeholder {
    color: var(--cdm-border-separator-medium);
}

/* Wrap password + icona "occhio" show/hide */
.cdm-auth-password-wrap {
    position: relative;
}

.cdm-auth-password-wrap .cdm-auth-input {
    padding-right: 2rem;
}

.cdm-auth-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--cdm-text-paragraph);
}

.cdm-auth-toggle:hover {
    color: var(--cdm-brand-primary-accent);
}

/* ── Contatti masked (PWD-04 Step 2) ────────────────────────── */
.cdm-auth-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cdm-border-separator-light);
}

.cdm-auth-contact-row:last-child {
    border-bottom: 0;
}

.cdm-auth-contact-value {
    font-size: var(--cdm-font-size-2);
    color: var(--cdm-text-title);
}

.cdm-auth-contact-row .cdm-auth-submit {
    margin-top: 0;
}

/* ── OTP card (PWD-04 Step 2+3) ─────────────────────────────── */
.cdm-otp-card {
    max-width: 780px;
    margin: 1.5rem 0;
    padding: 2rem;
    background-color: var(--cdm-bg-white);
    border: 1px solid var(--cdm-border-separator-light);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.cdm-otp-contacts {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cdm-otp-verify-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cdm-otp-verify-input-container {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 680px) {
    .cdm-otp-card {
        flex-direction: column;
    }

    .cdm-otp-contacts {
        flex: none;
    }
}

.cdm-otp-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cdm-otp-contact-info {
    flex: 1;
}

.cdm-otp-contact-label {
    font-weight: var(--cdm-font-weight-bold);
    font-size: var(--cdm-font-size-2);
    color: var(--cdm-text-title);
    margin-bottom: 0;
}

.cdm-otp-contact-info span {
    font-size: var(--cdm-font-size-1);
    color: var(--cdm-text-paragraph);
}

.cdm-otp-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 130px;
}

.cdm-otp-timer {
    display: none;
    justify-self: center;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--cdm-font-size-1);
    font-weight: var(--cdm-font-weight-semibold);
    color: var(--cdm-text-paragraph);
}

.cdm-otp-timer svg {
    flex-shrink: 0;
    stroke: var(--cdm-brand-primary-accent);
}

.cdm-otp-verify-col h3 {
    font-size: var(--cdm-font-size-2);
    font-weight: var(--cdm-font-weight-bold);
    color: var(--cdm-text-title);
    margin-bottom: 0.75rem;
}

.cdm-otp-hint {
    display: block;
    font-size: var(--cdm-font-size-hint);
    color: var(--cdm-text-muted);
    margin-top: 0.35rem;
    cursor: text;
}

/* ── MFA-03 OTP screen ──────────────────────────────────────── */

.cdm-mfa-otp-timer-line {
    font-size: var(--cdm-font-size-form);
    color: var(--cdm-text-paragraph);
    margin: 0;
}

/* ── Sezione informativa durata (PWD-01 + generica) ─────────── */

.cdm-auth-duration-title {
    font-weight: var(--cdm-font-weight-semibold);
    font-size: var(--cdm-font-size-form);
    margin-bottom: 0.25rem;
}

.cdm-auth-duration-body {
    font-size: var(--cdm-font-size-form);
    color: var(--cdm-text-paragraph);
    line-height: var(--cdm-line-height-l);
    margin: 0;
}