/* =============================================================================
 * cie-button.css
 * Stile per il bottone ufficiale "Entra con CIE".
 *
 * Riferimenti:
 *  - Logo ufficiale: https://github.com/italia/cie-graphics (SVG)
 *  - Manuale tecnico AGID: https://docs.italia.it/italia/cie/cie-manuale-tecnico-docs
 *  - L'utilizzo del kit grafico è OBBLIGATORIO (manuale tecnico, par. 1)
 *
 * Convenzioni:
 *  - Tre size: small (S), medium (M, default), large (L)
 *  - Colore: blu istituzionale italiano (#0066CC)
 *  - Hover/focus: leggero scurimento
 * ============================================================================= */

.cie-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 18px;
    background-color: #0066CC;
    color: #FFFFFF;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    border: 2px solid #0066CC;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    user-select: none;
}

    .cie-button:hover,
    .cie-button:focus {
        background-color: #0059B3;
        border-color: #0059B3;
        color: #FFFFFF;
        text-decoration: none;
        outline: none;
    }

    .cie-button:focus-visible {
        box-shadow: 0 0 0 3px rgba(0, 102, 204, .35);
    }

    .cie-button:active {
        background-color: #004D99;
        border-color: #004D99;
    }

    .cie-button:disabled,
    .cie-button.disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    /* Logo */
    .cie-button img,
    .cie-button svg {
        height: 22px;
        width: auto;
        display: block;
        /* Il logo bianco su sfondo blu è quello previsto dal kit */
    }

    /* Testo (separato dal logo per gestione spaziatura) */
    .cie-button .cie-button-text {
        display: inline-block;
        white-space: nowrap;
    }

    /* ---- Dimensioni ---- */
    .cie-button.cie-button-s {
        padding: 6px 12px;
        font-size: .875rem;
    }

        .cie-button.cie-button-s img,
        .cie-button.cie-button-s svg {
            height: 16px;
        }

    .cie-button.cie-button-m {
        /* default */
    }

    .cie-button.cie-button-l {
        padding: 14px 24px;
        font-size: 1.125rem;
    }

        .cie-button.cie-button-l img,
        .cie-button.cie-button-l svg {
            height: 28px;
        }

/* ---- Layout pagina di login ---- */
.cie-login-wrapper {
    max-width: 480px;
    margin: 3rem auto;
    padding: 2rem;
    background: #FFFFFF;
    border: 1px solid #E6E9F2;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    text-align: center;
}

    .cie-login-wrapper h1 {
        font-size: 1.5rem;
        margin-bottom: .5rem;
        color: #17324D;
    }

    .cie-login-wrapper p {
        color: #5C6F82;
        margin-bottom: 1.75rem;
    }

.cie-login-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

    .cie-login-actions .text-muted {
        font-size: .875rem;
        color: #5C6F82;
    }