.elementor-15 .elementor-element.elementor-element-34639f1b{--display:flex;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-693bf92{--display:flex;}@media(max-width:768px){.elementor-15 .elementor-element.elementor-element-34639f1b{--padding-top:42px;--padding-bottom:42px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for shortcode, class: .elementor-element-ba27126 *//* 1. Remove a quebra de linha (br) indesejada do HTML */
.wd-social-login a br {
    display: none !important;
}

/* 2. Alinha o conteúdo do botão */
.wd-social-login a {
    line-height: 1;
}

/* 1. Container Geral (.woodmart-social-login substitui .cwmp_form_login_social) */
.woodmart-social-login {
    position: relative;
    width: 100% !important;
    text-align: center !important;
    margin-top: 20px;
    margin-bottom: 20px;
    
    /* Configuração Flex para empilhar: Texto acima, botão abaixo */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Linha cinza de fundo */
.woodmart-social-login::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #e1e1e1;
    position: absolute;
    top: 10px; /* Alinha com o meio do texto "OU ENTRE COM" */
    left: 0;
    z-index: 0;
}

/* 2. Texto "OU ENTRE COM" */
.woodmart-social-login::before {
    content: "OU ENTRE COM";
    display: inline-block;
    background-color: #fff; /* Fundo branco para cobrir a linha */
    padding: 0 15px;

    position: relative;
    z-index: 1;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0 auto;
        color: var(--wd-title-color);
    text-transform: var(--wd-title-transform);
    font-weight: var(--wd-title-font-weight);
    font-style: var(--wd-title-font-style);
    font-family: var(--wd-title-font);
    line-height: 1.4;
}

/* Ajuste para o wrapper do botão ocupar 100% */
.woodmart-social-login .social-login-btn {
    width: 100%;
}

/* 3. Estilo do Botão Azul */
.woodmart-social-login .login-goo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #587bf2;
    color: #fff !important;
    text-decoration: none;
    height: 50px;
    border-radius: 25px;
    width: 100% !important;
    position: relative;
    
    /* A margem aqui afasta o botão do texto "OU ENTRE COM" */
    margin-top: 20px; 
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background 0.3s;
    z-index: 2;
    
    /* TRUQUE: Zera a fonte original para esconder o texto "Google" que vem no HTML 
       e usar o texto estilizado do ::after igual ao seu exemplo */
    font-size: 0 !important; 
}

.woodmart-social-login .login-goo-link:hover {
    background-color: #4366e0;
}

/* 4. Texto "GOOGLE" (Recriado via CSS para ficar igual ao seu modelo) */
.woodmart-social-login .login-goo-link::after {
    content: "GOOGLE";
    font-weight: bold;
    font-size: 14px !important; /* Restaura o tamanho da fonte */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 30px; /* Empurra para direita compensando o ícone */
    color: #fff;
}

/* 5. Ícone Personalizado (G) */
.woodmart-social-login .login-goo-link::before {
    content: "";
    background-image: url('https://gulafit.syscoin.com.br/wp-content/themes/woodmart/images/google-btn-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    
    background-color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    
    position: absolute;
    left: 22px; /* Posição à esquerda */
    top: 50%;
    transform: translateY(-50%);
}


.wd-col.col-login {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)!important;
    background-color: #ffffff!important;
    padding: 30px!important;
    border-radius: 10px!important; 
}

.wd-grid-f-col {
    margin: 0!important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f18954f *//* 1. Limpa o comportamento do container pai */
#customer_login {
    display: block; /* Garante que não force comportamentos flex estranhos */
    width: 100%;
}

/* 2. Centraliza a COLUNA (o box do formulário), não os textos internos */
#customer_login .wd-col {
    float: none;        /* Remove a flutuação padrão do tema (que joga p/ esquerda) */
    margin: 0 auto;     /* A mágica: margem automática nas laterais centraliza o bloco */
    width: 100%;
    max-width: 480px;   /* Define a largura máxima do "cartão" de login */
}

/* 3. Garante que os inputs e labels fiquem alinhados à esquerda (padrão) */
#customer_login form,
#customer_login .woocommerce-FormRow {
    text-align: left;   /* Força alinhamento à esquerda para os campos */
}

/* --- MANTÉM A LÓGICA DE MOSTRAR/OCULTAR --- */

/* Oculta registro inicialmente */
#customer_login .col-register {
    display: none;
}

/* Botão de troca (Visual) */
.wd-switch-btn {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    /*border: 1px solid #e1e1e1;*/
    background: #fdfdfd;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
}
.wd-switch-btn:hover {
    background-color: #f0f0f0;
}

/* Quando ativo registro */
#customer_login.active-register .col-login {
    display: none;
}
#customer_login.active-register .col-register {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */