/**
 * Quiltfolk Academy - login popup form + header status row
 * Pairs with qfa-login.js and the [qfa_login_form]/[qfa_access_button]
 * shortcodes. Adjust colors/spacing/breakpoints to match your site.
 */

/* --- Header status row (guest links, or greeting + CTA + logout) --- */

.qfa-header-status {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
}

.qfa-greeting {
	font-weight: 600;
}

.qfa-logout-link {
	font-size: 0.85em;
	opacity: 0.8;
}

/* --- Login popup form --- */

.qfa-login-form {
	max-width: 320px;
	margin: 0 auto;
}

.qfa-login-field {
	margin: 0 0 1em;
}

.qfa-login-field label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.qfa-login-field input {
	width: 100%;
	padding: 0.6em 0.75em;
	box-sizing: border-box;
}

.qfa-login-error {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #7a1a1a;
	border-radius: 4px;
}

.qfa-login-error[hidden] {
	display: none;
}

.qfa-login-submit {
	margin: 0 0 1em;
}

.qfa-btn-login-submit {
	width: 100%;
}

/* Simple loading state while the AJAX request is in flight - swap for a
   spinner if you'd rather. */
.qfa-login-form.is-loading .qfa-btn-login-submit {
	opacity: 0.6;
	cursor: default;
}

.qfa-login-lost {
	margin: 0;
	text-align: center;
	font-size: 0.9em;
}