/* Biometric widget — panel chrome only.
 *
 * The three inner buttons (toggle Enable/Disable, Clear all, Login)
 * share `.appress-btn` from `frontend-commons.css` plus per-role
 * variants (`.appress-btn-biometric-{login,primary,danger}`). This
 * file owns ONLY the panel structure: header, status, actions wrapper,
 * error line. Drops transparently into the host layout — no panel
 * background or border.
 */
.appress-biometric {
	--appress-bio-gap: 0.75rem;
}
.appress-biometric__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: var(--appress-bio-gap);
}
.appress-biometric__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}
.appress-biometric__status {
	font-size: 0.875rem;
	opacity: 0.7;
}
.appress-biometric__actions {
	display: flex;
	flex-direction: column;
	gap: var(--appress-bio-gap);
}
.appress-biometric__error {
	margin: 0.625rem 0 0;
	font-size: 0.8125rem;
	opacity: 0.8;
}


/* Biometric ships 3 button variants — `.appress-btn-biometric-login`,
 * `-primary`, `-danger`. They inherit the unified `.appress-btn`
 * defaults (white bg, light border, full width, 9px radius) from
 * `frontend-commons.css`; admins style them independently via the
 * Elementor trait. Per-button class names exist so the trait's
 * selector can target each one separately, not because the visual
 * defaults differ. */