/* HSC Google Sign-In */
.hsc-gsi {
	width: 100%;
	max-width: 400px;
	margin: 0 0 20px;
}

.hsc-gsi__button {
	min-height: 44px; /* Reserves space before Google's iframe loads (avoids layout shift). */
}

/* 1.4.1: centred button (setting "Alignment", default). Google draws its button inside
   .hsc-gsi__button at most 400 px wide; centring the content centres it. */
.hsc-gsi--align-center .hsc-gsi__button {
	display: flex;
	justify-content: center;
}

.hsc-gsi--align-center .hsc-gsi__message {
	text-align: center;
}

/* 1.4.0: light placeholder in that space until Google draws the button,
   so the spot doesn't look empty for a moment. Same max width as Google's button. */
.hsc-gsi__button:empty {
	max-width: 400px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.06);
}

.hsc-gsi--align-center .hsc-gsi__button:empty {
	margin-left: auto;
	margin-right: auto;
}

.hsc-gsi__separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: #6b6b6b;
	font-size: 14px;
	line-height: 1;
}

.hsc-gsi__separator::before,
.hsc-gsi__separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #dcdcdc;
}

.hsc-gsi__message {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.hsc-gsi__message.is-error {
	color: #b32d2e;
}

.hsc-gsi__message.is-info {
	color: #333;
}

.hsc-gsi__i18n {
	display: none !important;
}

/* 1.3.0: Google couldn't be loaded → hide button and "or" line. */
.hsc-gsi.is-unavailable {
	display: none !important;
}

/* 1.3.0: "Set a password" reminder in My Account (C). */
.hsc-gsi-nudge {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-left: 3px solid #000;
	background: #f5f5f5;
	font-size: 14px;
	line-height: 1.5;
}

.hsc-gsi-nudge a {
	text-decoration: underline;
}

/* Fallback notice (B) shown under the login forms while Google sign-in is off. */
.hsc-gsi-fallback {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-left: 3px solid #000;
	background: #f5f5f5;
	font-size: 14px;
	line-height: 1.5;
}

.hsc-gsi-fallback a {
	text-decoration: underline;
}

/* Inside the standard WooCommerce login form, align with the form fields. */
.woocommerce-form-login .hsc-gsi,
.woocommerce-form-register .hsc-gsi {
	max-width: none;
}