/**
 * Login Page Styles for TAG - Passwordless Login + Google SSO
 *
 * Styles for the custom login interface elements.
 *
 * @package Tag_WP_OTP_SSO
 */

/* Main container for OTP/SSO sections */
.tag-otp-sso-login-sections {
	margin-bottom: 20px;
}

/* Google SSO Section */
.tag-otp-sso-google-sso-section {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 16px;
}

.tag-otp-sso-google-sso-section h2 {
	text-align: center;
	margin: 0 0 12px;
	font-size: 18px;
	color: #1d2327;
}

.tag-otp-sso-google-sso-section-content {
	text-align: center;
}

.tag-otp-sso-google-sso-section-content p {
	margin: 0 0 16px;
	color: #50575e;
}

/* Google Sign-in Button */
.tag-otp-sso-google-btn {
	display: inline-block;
	background: #4285f4;
	color: #fff !important;
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	transition: background 0.2s;
}

.tag-otp-sso-google-btn:hover {
	background: #357ae8;
}

.tag-otp-sso-google-btn:focus {
	outline: 2px solid #4285f4;
	outline-offset: 2px;
}

/* Email OTP Section */
.tag-otp-sso-email-otp-section {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 16px;
}

.tag-otp-sso-email-otp-section h2 {
	text-align: center;
	margin: 0 0 12px;
	font-size: 18px;
	color: #1d2327;
}

/* OTP Status Messages */
.tag-otp-sso-otp-status {
	padding: 12px;
	margin-bottom: 16px;
	border-left: 4px solid;
	border-radius: 2px;
}

.tag-otp-sso-otp-status.success {
	background: #edfaed;
	border-color: #46b450;
	color: #2c662d;
}

.tag-otp-sso-otp-status.error {
	background: #fcf0f1;
	border-color: #dc3232;
	color: #761919;
}

.tag-otp-sso-otp-status.info {
	background: #e5f5fa;
	border-color: #72aee6;
	color: #1d2327;
}

/* OTP Forms */
.tag-otp-sso-email-form,
.tag-otp-sso-verify-form {
	text-align: center;
}

.tag-otp-sso-email-form p,
.tag-otp-sso-verify-form p {
	margin-bottom: 16px;
	color: #50575e;
}

.tag-otp-sso-email-form input[type="email"],
.tag-otp-sso-verify-form input[type="text"] {
	width: 100%;
	max-width: 320px;
	padding: 8px 12px;
	font-size: 16px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 12px;
}

.tag-otp-sso-email-form input[type="email"]:focus,
.tag-otp-sso-verify-form input[type="text"]:focus {
	border-color: #2271b1;
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 1px #2271b1;
}

/* OTP Timer */
.tag-otp-sso-otp-timer {
	text-align: center;
	padding: 8px;
	margin: 12px 0;
	font-size: 14px;
	color: #50575e;
}

.tag-otp-sso-otp-timer.expired {
	color: #dc3232;
	font-weight: 600;
}

/* WordPress Login Form Adjustments */
.tag-otp-sso.login .tag-otp-sso-login-sections + #login form#loginform {
	margin-top: 0;
}

.tag-otp-sso.login .tag-otp-sso-login-sections + #login form#loginform p label {
	color: #50575e;
}

/* Logo padding */
.tag-otp-sso.login #login h1 a {
	margin: 0 auto;
}

#login h1.wp-login-logo {
	padding: 0.4rem;
}

/* Change the login form width */
.tag-otp-sso.login #login {
	width: 600px;
	max-width: 600px;
}

.tag-otp-sso.login #login form {
	border-radius: 1rem;
	background: #fff;
	border: 1px solid #c3c4c7;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 1.5rem;
	margin-bottom: 0.5rem;
}

/* Add "WordPress Sign-In" title before the login form */
.tag-otp-sso.login #login #loginform::before {
	content: 'WordPress Sign-In';
	display: block;
	text-align: center;
	margin: 0 0 1rem 0;
	font-size: 1.3em;
	color: #3c434a;
	font-weight: 600;
	line-height: 1.4;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
	/* Change the login form width for mobile */
	.tag-otp-sso.login #login {
		width: 95%;
		max-width: 95%;
	}

	.tag-otp-sso-google-sso-section,
	.tag-otp-sso-email-otp-section {
		padding: 16px;
	}

	.tag-otp-sso-email-form input[type="email"],
	.tag-otp-sso-verify-form input[type="text"] {
		font-size: 16px; /* Prevents iOS zoom */
	}
}

.login .button-primary.otp {
    float: none;
}