/* WP Social Login - button styles adapted from Nextend nsl + Flatsome tuning */

div.nsl-container.wpsl-container {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-align: center;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Force full width on WC My Account login/register columns (Flatsome) */
.woocommerce-account .u-column1 div.nsl-container.wpsl-container,
.woocommerce-account .u-column2 div.nsl-container.wpsl-container,
.woocommerce-account .col-inner div.nsl-container.wpsl-container {
    width: 100%;
    max-width: 100%;
}

div.nsl-container .nsl-container-buttons a[data-plugin="nsl"] {
    text-decoration: none;
    box-shadow: none;
    border: 0;
}

div.nsl-container .nsl-container-buttons {
    display: flex;
    padding: 5px 0;
}

div.nsl-container-block-fullwidth .nsl-container-buttons {
    flex-flow: column;
    align-items: center;
}

div.nsl-container-block-fullwidth .nsl-container-buttons a {
    flex: 1 1 auto;
    display: block;
    margin: 5px 0;
    width: 100%;
}

div.nsl-container-inline .nsl-container-buttons {
    justify-content: center;
    flex-wrap: wrap;
}

div.nsl-container-inline .nsl-container-buttons a {
    margin: 5px;
    display: inline-block;
}

div.nsl-container .nsl-button {
    cursor: pointer;
    vertical-align: top;
    border-radius: 4px;
    transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Google hover — skin-aware */
div.nsl-container .nsl-button-google[data-skin="light"]:hover {
    background-color: #f8f9fa !important;
    box-shadow: inset 0 0 0 1px #5f6368, 0 1px 3px rgba(60,64,67,.15);
}

div.nsl-container .nsl-button-google[data-skin="dark"]:hover {
    background-color: #2d2e30 !important;
    box-shadow: inset 0 0 0 1px #b8b8b8, 0 1px 3px rgba(0,0,0,.3);
}

div.nsl-container .nsl-button-google[data-skin="neutral"]:hover {
    background-color: #e8eaed !important;
}

/* LINE hover — darker official green */
div.nsl-container .nsl-button-line:hover {
    background-color: #05b04c !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

div.nsl-container .nsl-button-default {
    color: #fff;
    display: flex;
}

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

div.nsl-container svg {
    height: 24px;
    width: 24px;
    vertical-align: top;
}

div.nsl-container .nsl-button-default div.nsl-button-label-container {
    margin: 0 24px 0 12px;
    padding: 10px 0;
    font-family: "Roboto Medium", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: .25px;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    flex: 1 1 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    display: inline-block;
}

/* Google skins */
div.nsl-container .nsl-button-google[data-skin="light"] {
    box-shadow: inset 0 0 0 1px #747775;
    color: #1f1f1f;
}

div.nsl-container .nsl-button-google[data-skin="dark"] {
    box-shadow: inset 0 0 0 1px #8E918F;
    color: #E3E3E3;
}

div.nsl-container .nsl-button-google[data-skin="neutral"] {
    color: #1F1F1F;
}

/* LINE — official brand green, white text, white-circle logo embedded in SVG */
div.nsl-container .nsl-button-line {
    color: #fff;
}

/* divider */
.wpsl-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 13px;
    margin: 14px 0 6px;
}

.wpsl-divider::before,
.wpsl-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e3e3e3;
}

.wpsl-divider span {
    padding: 0 12px;
}

body.login div.nsl-container.wpsl-container {
    margin-top: 6px;
}