/**
 * Custom Nextend Social Login Button Styles
 * Overrides default plugin styles for better UX
 */

/* Reduce button height - make it less tall */
div.nsl-container .nsl-button-default div.nsl-button-label-container {
    padding: 8px 0 !important;
    /* Reduced from 10px to 8px */
    font-size: 15px !important;
    /* Slightly smaller font */
    line-height: 18px !important;
    /* Tighter line height */
}

div.nsl-container .nsl-button-svg-container {
    padding: 6px !important;
    /* Reduced from 8px */
}

/* Match Respiracción brand styling */
div.nsl-container .nsl-button-google[data-skin="light"] {
    border-radius: 25px !important;
    /* Match your button style */
    box-shadow: inset 0 0 0 2px #747775 !important;
    transition: all 0.3s ease !important;
}

div.nsl-container .nsl-button-google[data-skin="light"]:hover {
    box-shadow: inset 0 0 0 2px #4285f4 !important;
    transform: translateY(-1px);
}

/* Separate styling for login vs register context */
/* Login page - single button with clear action */
.wppb-login-wrap .nsl-container .nsl-button-default div.nsl-button-label-container::before {
    content: "Iniciar sesión con ";
}

/* Register page - emphasize account creation */
.wppb-register-wrap .nsl-container .nsl-button-default div.nsl-button-label-container::before {
    content: "Registrarse con ";
}

/* Hide original text, we'll use ::before pseudo-element */
.wppb-login-wrap .nsl-container .nsl-button-default div.nsl-button-label-container,
.wppb-register-wrap .nsl-container .nsl-button-default div.nsl-button-label-container {
    font-size: 0 !important;
}

.wppb-login-wrap .nsl-container .nsl-button-default div.nsl-button-label-container::before,
.wppb-register-wrap .nsl-container .nsl-button-default div.nsl-button-label-container::before {
    font-size: 15px !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-weight: 600 !important;
}

/* Improve spacing and alignment */
div.nsl-container-block .nsl-container-buttons {
    grid-template-columns: minmax(200px, 100%) !important;
    gap: 10px;
}

div.nsl-container .nsl-button {
    border-radius: 25px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    div.nsl-container .nsl-button-default div.nsl-button-label-container {
        padding: 7px 0 !important;
        font-size: 14px !important;
    }

    div.nsl-container .nsl-button-svg-container {
        padding: 5px !important;
    }
}

/* Ensure proper spacing for the 'Forgot Password' link below */
div.nsl-container {
    margin-bottom: 15px !important;
}