/**
 * Estilos para os botões de login social no Bravis User
 * Integração com UsersWP Social Login - Full Width Buttons
 */

/* Ocultar qualquer label ou título de login social */
.uwp_social_login_label,
.uwp-social-login-title,
h3.uwp-social-title,
.field-social-login-top h3,
.field-social-login-top h4,
.field-social-login-top .uwp-social-login-label {
    display: none !important;
}

/* Container dos botões sociais no topo */
.pxl-user-form-body .field-social-login-top {
    margin: 0 0 20px 0 !important;
    padding: 0;
}

/* Ocultar a label padrão "Login via Social" */
.field-social-login-top + style,
.uwp_social_login_ul + style {
    display: none !important;
}

/* Divisor "Ou" */
.social-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    text-align: center;
}

.social-divider::before,
.social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.social-divider span {
    padding: 0 20px;
    color: #999;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Lista de botões sociais - Full Width */
.field-social-login-top .uwp_social_login_ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.field-social-login-top .uwp_social_login_ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100%;
    float: none !important;
}

.field-social-login-top .uwp_social_login_ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 48px;
    border-radius: 6px;
    background: #fff;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
}

.field-social-login-top .uwp_social_login_ul li a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Ícones dos botões - posicionados à esquerda */
.field-social-login-top .uwp_social_login_ul li i {
    font-size: 20px;
    margin-right: 12px;
    transition: all 0.3s ease;
}

.field-social-login-top .uwp_social_login_ul li img {
    max-width: 22px;
    height: 22px;
    margin-right: 12px;
}

/* Adicionar texto aos botões */
.field-social-login-top .uwp_social_login_ul li a::after {
    content: attr(data-provider);
    color: #333;
    font-size: 15px;
    font-weight: 600;
}

/* Google */
.uwp_social_login_icon_google a {
    background: #fff;
    border-color: #dadce0;
}

.uwp_social_login_icon_google a::after {
    content: 'Continuar com Google';
}

.uwp_social_login_icon_google a:hover {
    background: #f8f9fa;
    border-color: #dadce0;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
}

/* Facebook */
.uwp_social_login_icon_facebook a {
    background: #1877f2;
    border-color: #1877f2;
}

.uwp_social_login_icon_facebook a::after {
    content: 'Continuar com Facebook';
    color: #fff;
}

.uwp_social_login_icon_facebook a i {
    color: #fff !important;
}

.uwp_social_login_icon_facebook a:hover {
    background: #166fe5;
    border-color: #166fe5;
}

/* Twitter */
.uwp_social_login_icon_twitter a {
    background: #1da1f2;
    border-color: #1da1f2;
}

.uwp_social_login_icon_twitter a::after {
    content: 'Continuar com Twitter';
    color: #fff;
}

.uwp_social_login_icon_twitter a i {
    color: #fff !important;
}

.uwp_social_login_icon_twitter a:hover {
    background: #1a91da;
    border-color: #1a91da;
}

/* LinkedIn */
.uwp_social_login_icon_linkedin a,
.uwp_social_login_icon_linkedinopenid a {
    background: #0077b5;
    border-color: #0077b5;
}

.uwp_social_login_icon_linkedin a::after,
.uwp_social_login_icon_linkedinopenid a::after {
    content: 'Continuar com LinkedIn';
    color: #fff;
}

.uwp_social_login_icon_linkedin a i,
.uwp_social_login_icon_linkedinopenid a i {
    color: #fff !important;
}

.uwp_social_login_icon_linkedin a:hover,
.uwp_social_login_icon_linkedinopenid a:hover {
    background: #006699;
    border-color: #006699;
}

/* Instagram */
.uwp_social_login_icon_instagram a {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border: none;
}

.uwp_social_login_icon_instagram a::after {
    content: 'Continuar com Instagram';
    color: #fff;
}

.uwp_social_login_icon_instagram a i {
    color: #fff !important;
}

/* Yahoo */
.uwp_social_login_icon_yahoo a {
    background: #6001d2;
    border-color: #6001d2;
}

.uwp_social_login_icon_yahoo a::after {
    content: 'Continuar com Yahoo';
    color: #fff;
}

.uwp_social_login_icon_yahoo a i {
    color: #fff !important;
}

.uwp_social_login_icon_yahoo a:hover {
    background: #5000b5;
    border-color: #5000b5;
}

/* WordPress */
.uwp_social_login_icon_wordpress a {
    background: #21759b;
    border-color: #21759b;
}

.uwp_social_login_icon_wordpress a::after {
    content: 'Continuar com WordPress';
    color: #fff;
}

.uwp_social_login_icon_wordpress a i {
    color: #fff !important;
}

.uwp_social_login_icon_wordpress a:hover {
    background: #1e6a8d;
    border-color: #1e6a8d;
}

/* VKontakte */
.uwp_social_login_icon_vkontakte a {
    background: #4680c2;
    border-color: #4680c2;
}

.uwp_social_login_icon_vkontakte a::after {
    content: 'Continuar com VK';
    color: #fff;
}

.uwp_social_login_icon_vkontakte a i {
    color: #fff !important;
}

.uwp_social_login_icon_vkontakte a:hover {
    background: #3d73b0;
    border-color: #3d73b0;
}

/* Responsivo */
@media (max-width: 576px) {
    .field-social-login-top .uwp_social_login_ul li a {
        height: 44px;
        font-size: 14px;
        padding: 0 15px;
    }
    
    .field-social-login-top .uwp_social_login_ul li a::after {
        font-size: 14px;
    }
    
    .field-social-login-top .uwp_social_login_ul li i {
        font-size: 18px;
        margin-right: 10px;
    }
    
    .field-social-login-top .uwp_social_login_ul li img {
        max-width: 20px;
        height: 20px;
    }
    
    .social-divider span {
        font-size: 12px;
        padding: 0 15px;
    }
}