/* Social Account for WooCommerce — login buttons + guided-link confirm. */

.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;
}

/* 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;
}