/**
 * Open Access SSO — Login Page Styles
 *
 * Styles for the SSO button(s) rendered on wp-login.php.
 *
 * @package OpenAccessSSO
 * @since   1.0.0
 */

/*
 * Placement. Core fires `login_form` INSIDE #loginform, between the password
 * field and "Remember Me", and offers no hook below the form that is still
 * inside the box. So the form becomes a wrapping flex container: every
 * child keeps full width, Remember Me and the submit share one line, and
 * the SSO separator + buttons are ordered to the end. The Force-SSO inline
 * rule that hides the native fields (Login_Handler::render_sso_buttons)
 * targets the same children by descendant selector and is unaffected.
 */
#loginform {
	display: flex;
	flex-wrap: wrap;
}

#loginform > * {
	width: 100%;
	box-sizing: border-box;
}

#loginform .forgetmenot {
	flex: 1 1 auto;
	width: auto;
}

#loginform .submit {
	flex: 0 0 auto;
	width: auto;
}

.oasso-sso-separator,
.oasso-sso-buttons {
	order: 99;
}

/* Container for all SSO buttons */
.oasso-sso-buttons {
	margin: 16px 0 0;
	padding: 0;
}

/* Separator between the WP login form and SSO buttons */
.oasso-sso-separator {
	margin: 20px 0 16px;
	text-align: center;
	position: relative;
	line-height: 1;
}

.oasso-sso-separator span {
	display: inline-block;
	padding: 0 12px;
	background: #fff;
	color: #72777c;
	font-size: 13px;
	position: relative;
	z-index: 1;
}

.oasso-sso-separator::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #dcdcde;
}

/* Individual SSO button — styled to match WP login button */
.oasso-sso-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
	padding: 6px 14px;
	min-height: 32px;
	line-height: 2;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	color: #2271b1;
	background: #f6f7f7;
	border: 1px solid #2271b1;
	border-radius: 3px;
	transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.oasso-sso-button:hover,
.oasso-sso-button:focus {
	color: #fff;
	background: #2271b1;
	border-color: #2271b1;
	text-decoration: none;
}

.oasso-sso-button:active {
	color: #fff;
	background: #135e96;
	border-color: #135e96;
}

.oasso-sso-button:last-child {
	margin-bottom: 0;
}

/* Button icon (per-IdP customization) */
.oasso-sso-button .oasso-btn-icon {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 8px;
}