/**
 * WP Passkeys Pro - Login Page Styles
 *
 * Styles for the passkey login button and related UI on wp-login.php
 *
 * @package WP_Passkeys_Pro
 */

/* Passkey Section Container */
#wp-passkeys-section {
	text-align: center;
	margin-bottom: 20px;
	padding: 20px;
	background: var(--surface-bg);
	border: 1px solid var(--border-mid);
	box-shadow: var(--shadow-md);
}

/* Passkey Login Button */
#wp-passkeys-login-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--background-primary);
	background: var(--color-accent-blue);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

#wp-passkeys-login-btn:hover {
	background: var(--color-accent-blue-dark);
}

#wp-passkeys-login-btn:focus {
	outline: 2px solid var(--color-accent-blue);
	outline-offset: 2px;
}

#wp-passkeys-login-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#wp-passkeys-login-btn.loading {
	pointer-events: none;
}

/* Passkey Icon */
#wp-passkeys-login-btn .wp-passkeys-icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Status element hidden by default (shown by JS via classList) */
#wp-passkeys-status {
	display: none;
}

/* Status Messages */
.wp-passkeys-status {
	margin-top: 15px;
	padding: 10px;
	border-radius: 4px;
	font-size: 0.875rem;
}

.wp-passkeys-status-loading {
	color: var(--text-secondary);
	background: var(--color-surface-subtle);
}

.wp-passkeys-status-success {
	color: var(--color-primary-green);
	background: var(--color-alert-success-bg);
}

.wp-passkeys-status-error {
	color: var(--error-dark);
	background: var(--color-alert-danger-bg);
}

/* Divider */
.wp-passkeys-divider {
	display: flex;
	align-items: center;
	margin: 20px 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.wp-passkeys-divider::before,
.wp-passkeys-divider::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--border-mid);
}

.wp-passkeys-divider::before {
	margin-right: 10px;
}

.wp-passkeys-divider::after {
	margin-left: 10px;
}

/* Password Fallback Link */
#wp-passkeys-use-password {
	display: block;
	margin-top: 15px;
	font-size: 0.875rem;
	color: var(--color-accent-blue);
	text-decoration: none;
}

#wp-passkeys-use-password:hover {
	color: var(--color-accent-blue-dark);
	text-decoration: underline;
}

/* Hidden utility class for toggle logic */
.wp-passkeys-hidden {
	display: none !important;
}

/* Passkey Link in Password Form */
.wp-passkeys-use-passkey-link,
#wp-passkeys-use-passkey {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 0.875rem;
	color: var(--color-accent-blue);
	text-decoration: none;
}

#wp-passkeys-use-passkey:hover {
	color: var(--color-accent-blue-dark);
	text-decoration: underline;
}

/* When passkey is enabled, adjust login form */
.wp-passkeys-enabled #loginform {
	display: none;
}

.wp-passkeys-enabled #nav {
	display: none;
}

/* Show password form when fallback is clicked */
.wp-passkeys-enabled.show-password #loginform {
	display: block;
}

.wp-passkeys-enabled.show-password #wp-passkeys-section {
	display: none;
}

.wp-passkeys-enabled.show-password #nav {
	display: block;
}

/* Description Text */
.wp-passkeys-description {
	margin-top: 15px;
	font-size: 0.875rem;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* Accessibility - Focus Styles */
#wp-passkeys-login-btn:focus-visible {
	outline: 3px solid var(--color-accent-blue);
	outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	#wp-passkeys-login-btn {
		transition: none;
	}
}

/* Mobile Adjustments */
@media screen and (max-width: 782px) {
	#wp-passkeys-section {
		padding: 15px;
	}

	#wp-passkeys-login-btn {
		padding: 14px 20px;
		font-size: 0.9375rem;
	}
}