/**
 * Silver Users — social sign-in row, storefront mode.
 *
 * Written against the theme's own custom properties with literal fallbacks, so
 * on Silver the buttons pick up the site's border colour, radius and pink
 * accent, and on stock WooCommerce they still look deliberate. Nothing here
 * styles the form itself; the theme owns that.
 *
 * Logical properties throughout (margin-inline, inset-inline) so the row
 * mirrors under dir="rtl" with no second stylesheet and no [dir] overrides.
 */

.slvu-social {
	margin: 0 0 20px;
	clear: both;
}

.slvu-social__divider,
.slvu-social__or {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--slv-soft, #8f94a8);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
}

.slvu-social__divider::before,
.slvu-social__divider::after,
.slvu-social__or::before,
.slvu-social__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--slv-border, rgba(17, 17, 32, 0.09));
}

.slvu-social__divider {
	margin: 0 0 14px;
}

.slvu-social__or {
	margin: 16px 0 0;
	text-transform: none;
	font-size: 12.5px;
}

.slvu-social__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.slvu-social__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--slv-border-strong, rgba(17, 17, 32, 0.16));
	border-radius: var(--slv-radius-sm, 12px);
	background: var(--slv-surface, #fff);
	color: var(--slv-fg, #111120);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.12s ease;
}

.slvu-social__btn:hover,
.slvu-social__btn:focus-visible {
	border-color: var(--slv-pink, #ff4d93);
	background: #fff0f6;
	color: var(--slv-fg, #111120);
	transform: translateY(-1px);
}

.slvu-social__btn:focus-visible {
	outline: 2px solid var(--slv-pink, #ff4d93);
	outline-offset: 2px;
}

.slvu-social__btn:active {
	transform: translateY(0);
}

.slvu-social__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

/* Provider names are Latin inside an otherwise Arabic card. Isolating the run
   keeps the bidi algorithm from reordering the label against its icon. */
.slvu-social__label {
	unicode-bidi: isolate;
}

/* Arabic is cursive: any tracking pulls joined letters apart. The theme already
   flattens this globally, but the plugin's stylesheet has to stand on its own
   in case it is ever loaded without the theme's RTL layer. */
[dir="rtl"] .slvu-social,
[dir="rtl"] .slvu-social * {
	letter-spacing: normal;
}

[dir="rtl"] .slvu-social__divider,
[dir="rtl"] .slvu-social__or {
	text-transform: none;
}

@media (max-width: 480px) {
	.slvu-social__grid {
		grid-template-columns: 1fr;
	}

	.slvu-social__btn {
		min-height: 44px;
	}
}