/* ==========================================================
   CRAZYPAVOS - GOOGLE LOGIN
   ========================================================== */

.cp-google-login-block {
    width:100%;
    margin-top:22px;
}

.cp-google-login-divider {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 16px;
    color:#8f96ad;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
}

.cp-google-login-divider::before,
.cp-google-login-divider::after {
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.10);
}

.cp-google-login-divider span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
}

.cp-google-login-button,
.woocommerce .cp-google-login-button {
    width:100% !important;
    min-height:50px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:11px !important;

    padding:0 18px !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:14px !important;

    background:#ffffff !important;
    color:#17191f !important;

    font-family:inherit !important;
    font-size:.9rem !important;
    font-weight:850 !important;
    line-height:1 !important;

    text-decoration:none !important;

    box-shadow:0 12px 30px rgba(0,0,0,.16) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

.cp-google-login-button:hover,
.woocommerce .cp-google-login-button:hover {
    transform:translateY(-1px) !important;
    background:#f6f7fb !important;
    color:#111318 !important;
    box-shadow:0 16px 36px rgba(0,0,0,.22) !important;
}

.cp-google-login-button__icon {
    width:24px;
    height:24px;
    flex:0 0 24px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff;
    color:#4285f4;

    border:1px solid rgba(0,0,0,.10);

    font-size:.92rem;
    font-weight:950;
    font-family:Arial,sans-serif;
}

/* ==========================================================
   CUENTAS VINCULADAS
   ========================================================== */

.cp-google-account {
    width:100%;
}

.cp-google-account__head {
    margin-bottom:20px;
}

.cp-google-account__head h2 {
    margin:.2rem 0 .35rem !important;
}

.cp-google-account__head p {
    margin:0;
    color:#aab0c5;
}

.cp-google-account__eyebrow {
    color:#22d3ee;
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.16em;
}

.cp-google-provider {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    padding:20px;

    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;

    background:rgba(255,255,255,.025);
}

.cp-google-provider__identity {
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.cp-google-provider__identity > div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

.cp-google-provider__identity strong {
    color:#f7f8ff;
    font-size:1rem;
}

.cp-google-provider__identity small {
    max-width:100%;
    margin-top:4px;
    color:#aab0c5;
    overflow-wrap:anywhere;
}

.cp-google-provider__avatar {
    width:48px;
    height:48px;
    flex:0 0 48px;

    object-fit:cover;

    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;

    background:#fff;
}

.cp-google-provider__avatar--letter {
    display:grid;
    place-items:center;

    color:#4285f4;
    font-size:1.15rem;
    font-weight:950;
}

.cp-google-provider__status {
    display:inline-flex;
    margin-top:4px;

    color:#aab0c5;
    font-size:.78rem;
    font-weight:850;
}

.cp-google-provider__status--ok {
    color:#38e68b;
}

.cp-google-provider__actions {
    flex:0 0 auto;
}

.cp-google-provider__actions .cp-google-login-block {
    margin:0;
}

.cp-google-secondary-button,
.woocommerce .cp-google-secondary-button {
    min-height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 16px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;

    background:transparent;
    color:#f7f8ff;

    font-family:inherit;
    font-weight:800;

    cursor:pointer;
}

.cp-google-secondary-button:hover {
    background:rgba(255,255,255,.06);
}

.cp-google-account__help {
    margin:16px 0 0;
    color:#8f96ad;
    font-size:.8rem;
}

.cp-google-notice {
    margin-bottom:22px !important;
}

@media (max-width:700px) {
    .cp-google-provider {
        align-items:flex-start;
        flex-direction:column;
    }

    .cp-google-provider__actions,
    .cp-google-provider__actions form,
    .cp-google-provider__actions .cp-google-login-block,
    .cp-google-provider__actions .cp-google-login-button,
    .cp-google-secondary-button {
        width:100%;
    }
}