/* assets/wcgl-styles.css
 *
 * Due bottoni e un separatore. Di visibile ce n'è sempre uno solo: se la
 * libreria di Google riesce a disegnare il suo, `wcgl-script.js` mette
 * `hidden` sul ripiego (vedi templates/google-button.php).
 */

/* Wrapper principale */
.wcgl-login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0 0 4px;
    text-align: center;
}

/* Il posto dove Google disegna il suo bottone. Nasce hidden dal template. */
.wcgl-google-ufficiale {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*
 * ⚠️ `hidden` da solo qui non nasconde NIENTE.
 *
 * L'attributo vale `display: none`, ma è una regola del browser: qualunque
 * `display` scritto in un foglio di stile — le due righe qui sopra e la
 * `inline-flex` del ripiego più in basso — la batte per specificità. Il
 * risultato era che si vedevano tutti e due i bottoni, uno sopra l'altro, e
 * nel foglio non c'era scritto da nessuna parte il perché.
 */
.wcgl-google-ufficiale[hidden],
.wcgl-google-button[hidden] {
    display: none !important;
}

/* Separatore fra l'accesso con Google e il modulo con la password.
   `.wcgl-separator` è il nome usato da templates/apple-button.php: sta qui
   perché altrimenti, il giorno che si accendesse Apple, quel separatore
   resterebbe senza nessuna regola e nessuno saprebbe perché. */
.wcgl-separatore,
.wcgl-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    line-height: 1;
}

/*
 * Due righe ai lati, non una riga sotto al testo con lo sfondo che la copre:
 * quel trucco ha bisogno di sapere il colore di fondo del contenitore, e questo
 * foglio finisce dentro temi che quel colore lo scelgono loro. Con il flex non
 * c'è niente da indovinare.
 */
.wcgl-separatore::before,
.wcgl-separatore::after,
.wcgl-separator::before,
.wcgl-separator::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: .18;
}

.wcgl-separatore span,
.wcgl-separator span {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: .6;
}

/* ── Il ripiego ────────────────────────────────────────────────────────────
   Misure prese dalle indicazioni di Google per il bottone «outline / large»:
   alto 40, angoli 4, bordo #747775, marchio 18 px, testo 14 px.

   ⚠️ Il carattere NON è Roboto, ed è una deroga voluta. Roboto arriverebbe da
   fonts.googleapis.com, e questo tema serve tutti i font dal proprio server di
   proposito (functions.php: «nessuna chiamata a Google Fonts»). Su un sito con
   dati sanitari e un banner dei cookie, aggiungere una chiamata a un terzo per
   un carattere è un cambio di sostanza; la differenza si vede solo quando il
   bottone ufficiale non c'è. Il marchio, i colori e le proporzioni — cioè le
   parti che le indicazioni di Google chiedono di non toccare — restano quelli.
   ------------------------------------------------------------------------- */
.wcgl-google-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Le stesse misure del bottone che disegna Google: il ripiego non deve
       far ballare la pagina quando prende il suo posto. */
    width: 100%;
    max-width: 400px;
    min-height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #747775;
    border-radius: 4px;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .25px;
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.wcgl-google-button:hover,
.wcgl-google-button:focus-visible {
    background: #f8f9fa;
    border-color: #747775;
    color: #1f1f1f;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.wcgl-google-button:active {
    background: #e8eaed;
}

/* Icona Google */
.wcgl-google-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Privacy notice */
.wcgl-privacy-notice {
    margin-top: 15px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.wcgl-privacy-notice a {
    text-decoration: underline;
}

/* Loading state */
.wcgl-google-button.loading {
    pointer-events: none;
    opacity: 0.7;
}

.wcgl-google-button.loading .wcgl-button-text::after {
    content: '...';
    display: inline-block;
    animation: wcgl-dots 1.4s infinite;
}

@keyframes wcgl-dots {
    0%, 60%, 100% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
}

/* Error messages */
.woocommerce-error.wcgl-error {
    margin-bottom: 20px;
}