/* ==========================================================================
   User Registration form styling (login, registration, and anywhere else
   the plugin's forms appear)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google sign-in button (User Registration Social Connect)
   Restyles the plugin's button to Google's dark "Sign in with Google" spec.
   -------------------------------------------------------------------------- */

/* Let the button span the form width instead of sitting inline */
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google {
	display: block;
	margin: 0 0 5px;
}

/* The button itself */
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 45px; /* matches the site's 45px buttons and fields (Google's default is 40px) */
	padding: 0 12px;
	background-color: #131314;
	background-image: none;
	border: 1px solid #8e918f;
	border-radius: 4px; /* Google's rectangular shape; site buttons are square (0) */
	color: #e3e3e3;
	font-family: 'Roboto', arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.25px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .218s, border-color .218s, box-shadow .218s;
}

/* Google's "state layer": a white overlay that fades in on hover/press */
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #ffffff;
	opacity: 0;
	transition: opacity .218s;
	pointer-events: none;
}

body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a:hover {
	background-color: #131314; /* override the plugin's blue hover */
	color: #e3e3e3;
	box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a:hover::after {
	opacity: .08;
}

body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a:active::after,
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a:focus-visible::after {
	opacity: .12;
}

/* Visible keyboard focus in the site's pink (Google's snippet removes the outline) */
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a:focus-visible {
	outline: 2px solid var(--theme-palette-color-1, #D32B93);
	outline-offset: 2px;
}

/* Swap the plugin's PNG icon for Google's official "G" (SVG from Google's generator) */
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a .ursc-icon-block.ursc-login-with-google {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}

/* Label text */
body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a .ursc-login-text {
	display: block;
	padding-left: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a,
	body .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Cloudflare Turnstile: center the widget in the form.
   The plugin uses the same #ur-recaptcha-node wrapper on the login and
   registration forms, so this covers both.
   -------------------------------------------------------------------------- */
#ur-recaptcha-node {
	display: flex;
	justify-content: center;
	width: 100%;
}

#ur-recaptcha-node .cf-turnstile {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Registration form only (form.register): center the submit button, and
   size the Google button to its label (Google's default) and center it,
   instead of spanning the form. The login form keeps the full-width button.
   -------------------------------------------------------------------------- */
body .user-registration form.register .ur-button-container {
	display: block !important;
	float: none !important;
	width: 100% !important;
	text-align: center !important;
}

body .user-registration form.register .ur-button-container .ur-submit-button {
	display: inline-block !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body form.register .user-registration-social-connect-networks ul.ursc-network-lists {
	display: flex;
	justify-content: center;
	padding: 0;
}

body form.register .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google {
	display: block;
	margin: 0;
}

body form.register .user-registration-social-connect-networks ul.ursc-network-lists li.ursc-login-media.ursc-login-media--google a {
	width: auto;
	max-width: 400px;
}

/* "or" divider above the Google button, like the login form. Uses the
   plugin's own data-or text so it stays translatable. */
body form.register .user-registration-social-connect-networks {
	margin-top: 28px;
}

body form.register .user-registration-social-connect-networks::before {
	content: attr(data-or) !important;
	display: block !important;
	margin: 0 0 24px;
	color: #3a3a3a;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	background:
		linear-gradient(#d9dadc, #d9dadc) left center / calc(50% - 1.1em) 1px no-repeat,
		linear-gradient(#d9dadc, #d9dadc) right center / calc(50% - 1.1em) 1px no-repeat;
}