/**
 * Social Login Styles — Kajal Naina
 * Nextend Social Login (NSL) button styling for My Account + wp-login.php + account modal
 *
 * @task 86ex3rjcu
 */

/* ── Account modal: override NSL's inline display:none ────────── */
/* NSL JS runs at DOMReady before modal content is in live DOM;   */
/* we force-show the container and let our JS handle positioning.  */
#account-modal .nsl-container {
	display: block !important;
}

/* ── Account modal: full-width buttons to match form width ─────── */
#account-modal [id^="nsl-custom-login-form-"],
#account-modal .nsl-container,
#account-modal .nsl-container-buttons {
	width: 100%;
}

/* ── Account modal: stretch buttons to fill container width ─────── */
#account-modal .nsl-container-block-fullwidth .nsl-container-buttons {
	align-items: stretch;
}

#account-modal .nsl-button {
	width: 100%;
}

/* ── Shared: NSL container spacing ────────────────────────────── */
.woocommerce-MyAccount-content .nsl-container,
.woocommerce-form-login .nsl-container,
.woocommerce-form-register .nsl-container,
#account-modal .nsl-container,
body.login #login .nsl-container {
	margin-top: 0;
	margin-bottom: 0;
}

/* ── Shared: button base reset to match site's squared design ── */
.woocommerce-MyAccount-content .nsl-button,
.woocommerce-form-login .nsl-button,
.woocommerce-form-register .nsl-button,
#account-modal .nsl-button,
body.login #login .nsl-button {
	border-radius: 0;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0.05em;
	height: 44px;
}

/* ── Facebook button ─────────────────────────────────────────── */
.woocommerce-MyAccount-content .nsl-button-facebook,
.woocommerce-form-login .nsl-button-facebook,
.woocommerce-form-register .nsl-button-facebook,
#account-modal .nsl-button-facebook,
body.login #login .nsl-button-facebook {
	background: #1877f2;
	border: none;
}

/* ── Google button ───────────────────────────────────────────── */
.woocommerce-MyAccount-content .nsl-button-google,
.woocommerce-form-login .nsl-button-google,
.woocommerce-form-register .nsl-button-google,
#account-modal .nsl-button-google,
body.login #login .nsl-button-google {
	background: #fff;
	border: 1px solid #dadce0;
	color: #3c4043;
}

.woocommerce-MyAccount-content .nsl-button-google:hover,
.woocommerce-form-login .nsl-button-google:hover,
.woocommerce-form-register .nsl-button-google:hover,
#account-modal .nsl-button-google:hover,
body.login #login .nsl-button-google:hover {
	background: #f8f9fa;
}

/* ── OR separator ────────────────────────────────────────────── */
.woocommerce-MyAccount-content .nsl-separator,
.woocommerce-form-login .nsl-separator,
.woocommerce-form-register .nsl-separator,
#account-modal .nsl-separator,
body.login #login .nsl-separator {
	color: #767676;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-top: 20px;
	margin-bottom: 16px;
}

.woocommerce-MyAccount-content .nsl-separator::before,
.woocommerce-MyAccount-content .nsl-separator::after,
.woocommerce-form-login .nsl-separator::before,
.woocommerce-form-login .nsl-separator::after,
.woocommerce-form-register .nsl-separator::before,
.woocommerce-form-register .nsl-separator::after,
#account-modal .nsl-separator::before,
#account-modal .nsl-separator::after,
body.login #login .nsl-separator::before,
body.login #login .nsl-separator::after {
	border-color: #e0e0e0;
}

/* ── Gap between buttons ─────────────────────────────────────── */
.woocommerce-MyAccount-content .nsl-container-block .nsl-button,
.woocommerce-form-login .nsl-container-block .nsl-button,
.woocommerce-form-register .nsl-container-block .nsl-button,
#account-modal .nsl-container-block .nsl-button,
body.login #login .nsl-container-block .nsl-button {
	margin-bottom: 8px;
}

/* ── wp-login.php: widen login box to fit fullwidth buttons ─── */
body.login #loginform {
	padding-bottom: 20px;
}

/* ── My Account: bottom spacing inside the form card ────────── */
#nsl-custom-login-form-1,
#nsl-custom-login-form-2 {
	padding-bottom: 8px;
}