/* JatimSatu ID -- social sign-in buttons (Phase F).

   Its OWN file rather than an edit to jatimsatu-id.css: LiteSpeed
   strips the ?ver= query string from enqueued asset URLs on this site
   (same constraint documented for jsn-nav in inc/enqueue.php), so
   edits to an existing stylesheet stay invisible to browsers that
   already cached it. A new filename is the reliable cache-bust.

   Loaded on the account templates + the ?jsn_fb= / ?jsn_oauth= error
   routes, alongside jatimsatu-id.css whose tokens it builds on.
*/

.jsn-id-social{
	display:flex;
	flex-direction:column;
	gap:var(--space-2);
}

/* Equal width comes from the column flex above; this only handles the
   inner icon+label alignment and neutralises .jsn-id-btn's default
   top margin, which was tuned for a lone submit button. */
.jsn-id-btn--social{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-2);
	width:100%;
	margin-top:0;
	background:#fff;
	color:var(--color-ink);
	border:1px solid var(--color-rule);
	font-size:14.5px;
	padding:var(--space-3) var(--space-4);
	min-height:46px;
	box-sizing:border-box;
}
.jsn-id-btn--social:hover{
	background:var(--color-canvas);
	color:var(--color-ink);
	border-color:var(--color-ink);
}
.jsn-id-btn--social:focus-visible{
	outline:2px solid var(--color-red);
	outline-offset:2px;
}
.jsn-id-btn--social svg{ flex:0 0 auto; }

/* The OTP button has no brand mark, so its glyph takes the site's own
   ink colour rather than a vendor colour. */
.jsn-id-btn--otp svg{ color:var(--color-muted); }

@media(max-width:400px){
	.jsn-id-btn--social{ font-size:14px; min-height:44px; }
}