/* Social Account for WooCommerce — login buttons + guided-link confirm (v2: privacy line, in-app browser note). */

.sawc-social {
	margin: 1.25em 0;
}

.sawc-social__divider {
	display: flex;
	align-items: center;
	margin: 0 0 1em;
	color: #6b7280;
	font-size: 0.85em;
	text-align: center;
}

.sawc-social__divider::before,
.sawc-social__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.sawc-social__divider span {
	padding: 0 0.75em;
}

.sawc-social__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.sawc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0.6em 1em;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #1f2937;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.sawc-btn:hover {
	background: #f9fafb;
}

.sawc-btn:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.sawc-btn[disabled] {
	cursor: default;
}

.sawc-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.sawc-btn__icon svg {
	width: 100%;
	height: 100%;
}

.sawc-btn--facebook .sawc-btn__icon {
	color: #1877f2;
}

.sawc-btn--apple .sawc-btn__icon {
	color: #000;
}

/* Click-time loading state while the nonce is fetched and the browser navigates
   to the provider. The label and icon stay visible (so the redirect reads as an
   intentional "working…" state, not a blank screen); a small spinner appears
   inline after the label. */
.sawc-btn.is-loading {
	opacity: 0.85;
}

.sawc-btn.is-loading::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: 0.5em;
	border: 2px solid rgba(31, 41, 55, 0.25);
	border-top-color: #1f2937;
	border-radius: 50%;
	animation: sawc-spin 0.6s linear infinite;
}

@keyframes sawc-spin {
	to {
		transform: rotate(360deg);
	}
}

.sawc-social__error {
	margin: 0.75em 0 0;
	color: #b91c1c;
	font-size: 0.85em;
}

/* The store's registration privacy text under the buttons (1.3.0). Colour and background are both
   set, so a theme that styles .woocommerce-privacy-policy-text cannot leave it unreadable. */
.sawc-social .sawc-social__privacy {
	margin: 0.75em 0 0;
	background: transparent;
	color: #6b7280;
	font-size: 0.8em;
	line-height: 1.45;
	text-align: center;
}

.sawc-social .sawc-social__privacy p {
	margin: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

.sawc-social .sawc-social__privacy a {
	color: inherit;
	text-decoration: underline;
}

/* In an app's own browser Google refuses to sign anyone in (see twm-sa-buttons_v2.js): the script
   puts sawc-in-app on <html>, the Google button goes and one note takes its place. */
html.sawc-in-app .sawc-btn--google {
	display: none;
}

.sawc-social .sawc-social__note {
	margin: 0 0 0.75em;
	padding: 0.6em 0.8em;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
	color: #374151;
	font-size: 0.85em;
	line-height: 1.4;
}

/* Guided-link password confirmation. */
.sawc-confirm {
	margin: 0 0 1.5em;
	padding: 1.25em;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.sawc-confirm__title {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.sawc-confirm__intro {
	margin: 0 0 1em;
}

.sawc-confirm__reset {
	margin: 1em 0 0;
	font-size: 0.9em;
	color: #6b7280;
}

/* Rendered as a one-click <button> that posts the reset request, but styled as
   the inline text link it visually reads as. */
.sawc-confirm__reset-link {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.sawc-confirm__reset-link:hover,
.sawc-confirm__reset-link:focus {
	text-decoration: none;
}