/**
 * Nextend Social Login - Elessi Theme Custom Styles
 * Estilização baseada no design fornecido
 */

/* ========================================
   RESET DE ESTILOS PADRÃO DO NEXTEND
   ======================================== */

.nsl-container {
    margin: 20px 0 !important;
    padding: 0 !important;
}

/* Remove estilos padrão dos botões */
.nsl-container .nsl-button {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    text-decoration: none !important;
}


/* ========================================
   CONTAINER DOS BOTÕES
   ======================================== */

.nsl-container-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

/* ========================================
   ESTILO DOS BOTÕES (CÍRCULOS BRANCOS)
   ======================================== */

.nsl-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 75px !important;
    height: 75px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #e5e5e5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.nsl-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    border-color: #d0d0d0 !important;
}

.nsl-button:active {
    transform: translateY(-1px) !important;
}

/* ========================================
   ÍCONES DOS BOTÕES
   ======================================== */

/* Remove o texto dos botões */
.nsl-button-label-container {
    display: none !important;
}

/* Centraliza e dimensiona os ícones */
.nsl-button-svg-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
}

.nsl-button-svg-container svg {
    width: 100% !important;
    height: 100% !important;
}

/* ========================================
   CORES ESPECÍFICAS POR PROVIDER
   ======================================== */

/* Google */
.nsl-button-google {
    background: #ffffff !important;
}

.nsl-button-google:hover {
    background: #f8f9fa !important;
    border-color: #4285f4 !important;
}

/* TikTok */
.nsl-button-tiktok {
    background: #ffffff !important;
}

.nsl-button-tiktok:hover {
    background: #f8f8f8 !important;
    border-color: #000000 !important;
}

.nsl-button-tiktok svg path {
    fill: #000000 !important;
}

/* Facebook */
.nsl-button-facebook {
    background: #ffffff !important;
}

.nsl-button-facebook:hover {
    background: #f0f2f5 !important;
    border-color: #1877f2 !important;
}

.nsl-button-facebook svg path {
    fill: #1877f2 !important;
}

/* Apple */
.nsl-button-apple {
    background: #ffffff !important;
}

.nsl-button-apple:hover {
    background: #f5f5f5 !important;
    border-color: #000000 !important;
}

.nsl-button-apple svg path {
    fill: #000000 !important;
}

/* ========================================
   INTEGRAÇÃO COM MODAIS DO ELESSI
   ======================================== */

/* Ajustes para modais */
.nasa-login-register-ajax .nsl-container,
.mfp-content .nsl-container,
#nasa-login-register-form .nsl-container {
    margin: 25px 0 15px 0 !important;
}

/* Ajuste do separador dentro dos modais */
.nasa-login-register-ajax .nsl-container::before,
.mfp-content .nsl-container::before,
#nasa-login-register-form .nsl-container::before {
    margin: 20px 0 20px 0;
}

/* Garante que os botões fiquem centralizados */
.nasa-login-register-ajax .nsl-container-buttons,
.mfp-content .nsl-container-buttons {
    justify-content: center !important;
}

/* ========================================
   ANIMAÇÕES
   ======================================== */

@keyframes nslFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nsl-container {
    animation: nslFadeIn 0.4s ease-out;
}

/* Animação de hover suave */
.nsl-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.nsl-button:hover::after {
    width: 100%;
    height: 100%;
}

/* ========================================
   ESTADO DE LOADING (OPCIONAL)
   ======================================== */

.nsl-button[disabled],
.nsl-button.nsl-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
    .nsl-button {
        width: 54px !important;
        height: 54px !important;
    }
    
    .nsl-button-svg-container {
        width: 26px !important;
        height: 26px !important;
    }
    
    .nsl-container-buttons {
        gap: 14px !important;
    }
}

@media (max-width: 480px) {
    .nsl-button {
        width: 50px !important;
        height: 50px !important;
    }
    
    .nsl-button-svg-container {
        width: 24px !important;
        height: 24px !important;
    }
    
    .nsl-container-buttons {
        gap: 12px !important;
    }
    
    .nsl-container::before {
        margin: 20px 0 18px 0;
        font-size: 13px;
    }
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */

.nsl-button:focus {
    outline: 2px solid #4285f4 !important;
    outline-offset: 2px !important;
}

.nsl-button:focus:not(:focus-visible) {
    outline: none !important;
}

/* ========================================
   FIX PARA POSSÍVEIS CONFLITOS
   ======================================== */

/* Remove margens indesejadas */
.nsl-container p {
    margin: 0 !important;
}

/* Garante que nada quebre o layout */
.nsl-container * {
    box-sizing: border-box !important;
}

/* Remove backgrounds padrão */
.nsl-container .nsl-container-block {
    background: transparent !important;
    padding: 0 !important;
}


/* ========================================
   AJUSTE PARA TEMA ESCURO (OPCIONAL)
   ======================================== */

@media (prefers-color-scheme: dark) {
    .nsl-button {
        background: #1a1a1a !important;
        border-color: #333 !important;
    }
    
    .nsl-button:hover {
        background: #2a2a2a !important;
        border-color: #444 !important;
    }
    
    .nsl-container::before {
        color: #999;
    }
}

div.nsl-container .nsl-button-svg-container {
    flex: 0 0 auto;
    padding: 2px!important;
    display: flex;
    align-items: center;
}

div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"] {
    text-decoration: none;
    box-shadow: none;
    border: 0;
    text-align: -webkit-center!important;
    margin: 0px!important;
}